如何写好一个vue前端页面（二） base.scss base.js

 

一个好的前端页面当然需要一个好的公共部分，提取了简单的css和js，记录日常

 

一个小小的base.scss

@mixin fz($font-size) {
    font-size: $font-size;
    [data-dpr="2"] & {
        font-size: $font-size * 2;
    }
    [data-dpr="3"] & {
        font-size: $font-size * 3;
    }
}
@mixin dpr-img($url,$name,$type:".jpg"){
    background-image: url($url+"2x/"+ $name+"@2x"+$type);
    [data-dpr="3"] &{
       background-image: url($url+"3x/"+ $name+"@3x"+$type);
    }
}



@mixin table-center {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

@mixin poa-center($w, $h) {
    position: absolute;
    width: $w;
    height: $h;
    left: 50%;
    top: 50%;
    // margin-left:-($w/2);
    // margin-top:-($h/2);
    transition: translate(-50%, -50%)
}

@mixin flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

@mixin t-overflow($line:1) {
    @if $line==1 {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    @else {
        display: -webkit-box;
        -webkit-line-clamp: $line;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@function torem($px) {
    @return $px / 75px * 1rem;
}


@fontFamily: Roboto, Lato, sans-serif;  // 字体
// 主色和强调色
@primaryColor: #ce3d3e;           // 主色
@darkerPrimaryColor: #ce3d3e;  // 更深的主色
@lighterPrimaryColor: @grey400;      // 浅一点的主色
@accentColor: #ce3d3e;             // 强调色
@darkerAccentColor: @grey100;        // 更深的强调色
@lighterAccentColor: @grey500;       // 浅一点的强调色

// 文本颜色
@textColor: @darkBlack;
@secondaryTextColor: fade(@fullBlack, 54%);
@alternateTextColor: @white;
@borderColor: fade(@fullBlack, 12%);
@disabledColor: fade(@fullBlack, 38%);

// background
@backgroundColor: @white;           // 背景色
@statusBarBackgroundColor: @grey300; // web项目没有状态栏，所以也没有使用
@appbarBackgroundColor: @grey100; // 并未在appbar组件中应用
@dialogBackgroundColor: @white; // dialogs、 cards、 paper 组件背景

// icon color
@activeIconColor: fade(@fullBlack, 54%);
@inActiveIconColor: fade(@fullBlack, 38%);

@import "../../node_modules/muse-ui/less/theme-vars.less";  // 默认组件变量
@import "../../node_modules/muse-ui/less/theme.less"; // 主题相关的样式

一个小小的base.js

export function getStyle(el,style){
    return parseInt(window.getComputedStyle(el, false)[style])
}

export function getDeviceRatio(){
	var isAndroid = window.navigator.appVersion.match(/android/gi);
    var isIPhone = window.navigator.appVersion.match(/iphone/gi);
    var devicePixelRatio = window.devicePixelRatio;
    var dpr;
    if (isIPhone) {
        // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
        if (devicePixelRatio >= 3) {                
            dpr = 3;
        } else if (devicePixelRatio >= 2){
            dpr = 2;
        } else {
            dpr = 1;
        }
    } else {
        // 其他设备下，仍旧使用1倍的方案
        dpr = 1;
    }
    return dpr
}
export function timeStamp(bool,time){ //时间戳  bool (精确度)  时间字段数组
    var obj = time;
    var newDate = new Date();
    newDate.setTime(obj * 1000);

    var year = newDate.getFullYear();
    var month = newDate.getMonth() + 1;
    month = month < 10 ? "0" + month : month;
    var date = newDate.getDate();
    date = date < 10 ? "0" + date : date;

    var hours = newDate.getHours();
    hours = hours < 10 ? "0" + hours : hours;
    var minute = newDate.getMinutes();
    minute = minute < 10 ? "0" + minute : minute;
    var second = newDate.getSeconds();
    second = second < 10 ? "0" + second : second;

    if (bool) {
      return year + "-" + month + "-" + date + " " + hours + ":" + minute + ":" + second;
    } else {
      return year + "-" + month + "-" + date;
    }
};

		

 

这样的公共的部分，让你的代码轻松简单！