index

src/page/userCenter/userCenter.vue

@@ -0,0 +1,28 @@
+<template>
+    <div class="asl">
+        sadadas{{test}}
+        <span></span>
+    </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      test: 111
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.asl {
+  width: 2rem;
+  font-size: 1rem;
+  heigth: 1rem;
+}
+.test {
+  width: 5rem;
+  heigth: 2rem;
+}
+</style>

src/style/base.scss

@@ -0,0 +1,12 @@
+// 公用css样式
+$baseURl: '../../assets/images'; 
+$globalBg: #ffffff;
+$partialBg: #ffffff;
+$globalColor: #000000;
+$globalFont: 14px;
+$health: #68CAB0;
+$education: #51BBFF;
+$sport: #68CAB0;
+$healthT:  linear-gradient(-225deg, #68CAB0 0%, #C3EAD2 100%);
+$educationT: linear-gradient(-225deg, #4DB9FF 0%, rgba(127,194,247,0.59) 100%);
+$sportT: linear-gradient(-225deg, #68CAB0 0%, #C3EAD2 100%);

src/style/main.sass

@@ -0,0 +1,170 @@
+@charset "utf-8";
+
+html,body {
+    width: 100%;
+    height: 100%;
+    -webkit-text-size-adjust: 100%;
+    position: relative;
+    color: #333;
+    overflow-x: hidden;
+    font-size: 100px;
+}
+
+@media screen and (max-width:320px) {
+    html,body {
+        font-size: 85px;
+    }
+}
+
+@media screen and (min-width:375px) {
+    html,body {
+        font-size: 100px;
+    }
+}
+
+@media screen and (min-width:414px) {
+    html,body {
+        font-size: 110px;
+    }
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    color: #000;
+    font-family: "微软雅黑";
+    -webkit-tap-highlight-color: rgba(255,0,0,0);
+    -webkit-font-smoothing: antialiased;
+}
+
+body * {
+    font-size: .14rem;
+}
+
+a {
+    text-decoration: none;
+}
+
+a:hover {
+    cursor: pointer;
+}
+
+em {
+    font-style: normal;
+}
+
+li {
+    list-style: none;
+}
+
+img {
+    border: 0;
+    vertical-align: middle;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+p {
+    word-wrap: break-word;
+}
+
+b {
+    font-weight: normal;
+}
+
+input,textarea {
+    border: 0;
+    -webkit-appearance: none;
+}
+
+input[type=input] {
+    -webkit-appearance: none;
+}
+
+input[type=checkbox] {
+    -webkit-appearance: checkbox;
+}
+
+.text-overflow-ellipsis {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.centerLabel {
+    display: block;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%,-50%);
+    -webkit-transform: translate(-50%,-50%);
+}
+
+.flex-h {
+    display: flex;
+    display: -webkit-flex;
+}
+
+.flex-v {
+    display: flex;
+    display: -webkit-flex;
+    flex-direction: column;
+    -webkit-flex-direction: column;
+}
+
+.flex-item {
+    flex: 1;
+    -webkit-flex: 1;
+    position: relative;
+    overflow: hidden;
+}
+
+*[class*="text-overflowEllipsis-line"] {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+}
+
+.text-overflowEllipsis-line2 {
+    -webkit-line-clamp: 2;
+}
+
+.text-overflowEllipsis-line3 {
+    -webkit-line-clamp: 3;
+}
+
+.text-overflowEllipsis-line4 {
+    -webkit-line-clamp: 4;
+}
+
+*[class*="overflow-scroll-y"] {
+    overflow-x: hidden;
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: touch;
+}
+
+*[class*="overflow-scroll-x"] {
+    overflow-y: hidden;
+    overflow-x: scroll;
+    -webkit-overflow-scrolling: touch;
+}
+
+.overflow-scroll-y-3d,.overflow-scroll-x-3d {
+    transform: translateZ(0);
+    -webkit-transform: translateZ(0);
+}
+
+.overflow-scroll-x::-webkit-scrollbar,.overflow-scroll-x-3d::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+    color: transparent;
+    display: none;
+}
+
+input:focus,textarea:focus,select:focus {
+    outline: none;
+}

src/style/mixin.scss

@@ -0,0 +1,53 @@
+// 圆角
+@mixin BorderRadius($radius: 50%) {
+    border-radius: $radius;
+}
+
+// 阴影
+@mixin layoutBoxShadaw($x: 2px, $y: 2px, $blur: 14px, $color: #ABABAB) {
+    box-shadow: $x $y $blur $color;
+}
+
+// 定位
+@mixin absoluteCenter($left: 50%, $top: 50%, $x: -50%, $y: -50%) {
+    position: absolute;
+    left: $left;
+    top: $top;
+    transform: translate($x, $y)
+}
+
+// 浮动布局
+@mixin float($float:left) {
+    float: $float;
+}
+
+// flex布局
+@mixin flexLayout ($jc: center, $ai: center, $ff: row nowrap) {
+    display: flex;
+    justify-content: $jc;
+    align-items: $ai;
+    flex-flow: $ff;
+}
+
+// 布局pandding
+@mixin layoutPadding($top:0, $right:0, $bottom:0, $left:0) {
+    padding-top: $top;
+    padding-bottom: $bottom;
+    padding-right: $right;
+    padding-left: $left;
+}
+
+// 布局margin
+@mixin layoutMargin($top:0, $right:auto, $bottom:0, $left:auto) {
+    margin-top: $top;
+    margin-bottom: $bottom;
+    margin-right: $right;
+    margin-left: $left;
+}
+
+// 单行溢出省略号
+@mixin textOverflow(){
+  overflow: hidden;
+  text-overflow:ellipsis;
+  white-space: nowrap;
+}