diff --git a/src/assets/scss/index.scss b/src/assets/scss/index.scss
new file mode 100644
index 0000000..b6fe7d2
--- /dev/null
+++ b/src/assets/scss/index.scss
@@ -0,0 +1,204 @@
+@import './reset.scss';
+@import './mixin.scss';
+@import './variables.scss';
+html {
+  @include root-font-size();
+}
+//@author TalkTao
+
+.flex-shrink-0 {
+  flex-shrink: 0;
+}
+.flex-grow-0 {
+  flex-grow: 0;
+}
+.flex-grow-1 {
+  flex-grow: 1;
+}
+.flex-column {
+  flex-direction: column;
+}
+.flex-wrap {
+  flex-wrap: wrap;
+}
+.object-fit-cover {
+  object-fit: cover;
+}
+.border-box {
+  box-sizing: border-box;
+}
+.fw-bold {
+  font-weight: bold;
+}
+.w-0 {
+  width: 0;
+}
+.w-100 {
+  width: 100%;
+}
+.w-50{
+  width: 50%;
+}
+.h-100 {
+  height: 100%;
+}
+.text-ellipsis {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+@each $key, $val in $fontSizeS {
+  .fs-#{$key} {
+        font-size: #{$val};
+  }
+}
+//.d-flex {display: flex;}
+@each $item in $displayList {
+  .d-#{$item} {
+        display: #{$item};
+  }
+}
+//.flex-center {justify-content: center;}
+@each $commonKey, $commonVal in $flexCommonValues {
+  .flex-#{$commonKey} {
+        display: flex;
+        justify-content: #{$commonVal};
+        align-items: #{$commonVal};
+  }
+  .align-self-#{$commonKey} {
+        align-self: #{$commonVal};
+  }
+}
+//.justify-content-between {justify-content: sapce-between;}
+@each $key, $val in $justify-content-values {
+  .justify-content-#{$key} {
+        justify-content: #{$val};
+  }
+}
+//.align-items-start {align-items-start: flex-start;}
+@each $key, $val in $align-items-values {
+  .align-items-#{$key} {
+        align-items: #{$val};
+  }
+}
+//.postion-absolute {absolute;}
+@each $pos in $positionList {
+  .position-#{$pos} {
+        position: #{$pos};
+  }
+}
+//.overflow-x-scroll {overflow-x:scroll}
+@each $dir in $overflowDirs {
+  .#{$dir}-scroll {
+        #{$dir}: scroll;
+  }
+}
+//pt-5 {padding-top: 1vw}
+.rounded-circle {
+  border-radius: 50%;
+}
+@for $size from 1 through 50 {
+  .rounded-#{$size} {
+        border-radius: #{$size}vw;
+  }
+  @each $t_d_key, $t_d_val in $spaceTypes_Dirs {
+        .#{$t_d_key}-#{$size} {
+              #{$t_d_val}: #{$size}vw;
+        }
+  }
+  .mx-#{$size} {
+        margin-left: #{$size}vw;
+        margin-right: #{$size}vw;
+  }
+  .my-#{$size} {
+        margin-top: #{$size}vw;
+        margin-bottom: #{$size}vw;
+  }
+  .px-#{$size} {
+        padding-left: #{$size}vw;
+        padding-right: #{$size}vw;
+  }
+  .py-#{$size} {
+        padding-top: #{$size}vw;
+        padding-bottom: #{$size}vw;
+  }
+}
+//top-0 {top:　0;}
+@each $type, $val in $positionTypes {
+  .#{$type}-0 {
+        #{$val}: 0;
+  }
+}
+//bg-white {background-color: white;}
+@each $key, $val in $colors {
+  .bg-#{"" + $key} {
+        background-color: #{$val};
+  }
+  .text-#{"" + $key} {
+        color: #{$val};
+  }
+}
+//.border-pill {border-radius: 50rem}
+@each $key, $val in $radiusList {
+  .border-#{$key} {
+        border-radius: #{$val};
+  }
+}
+//.opation-75 {opacity: 0.75}
+@for $index from 0 through 4 {
+  .opacity-#{$index * 25} {
+        opacity: #{$index * 0.25};
+  }
+}
+//.text-center {text-align: center}
+@each $var in $textAlignDirs {
+  .text-#{$var} {
+        text-align: #{$var};
+  }
+}
+//.border-bottom-1 {border-bottom: 1px} .border-bottom {border-bottom: 1px}
+@for $size from 0 to 5 {
+  @each $posKey, $posVal in $positionTypes {
+        @if $size == 0 {
+              .border-#{$posKey} {
+                    border-#{$posVal}: 1px solid #e6e6e6; 
+              }
+        } @else {
+              .border-#{$posKey}-#{$size} {
+                    border-#{$posVal}: #{$size}px solid #e6e6e6;
+              }
+        }
+  }
+}
+@mixin placeholderColor($color) {
+  &::input-placeholder {
+        /*WebKit browsers*/
+        color: $color;
+  }
+  &::-webkit-input-placeholder {
+        /*WebKit browsers*/
+        color: $color;
+  }
+  &::-moz-input-placeholder {
+        /*Mozilla Firefox*/
+        color: $color;
+  }
+  &::-ms-input-placeholder {
+        /*Internet Explorer*/
+        color: $color;
+  }
+}
+@mixin ellipsisRow($row: 1) {
+  @debug "$row is #{$row}";
+  @if $row == 1 {
+        // @debug "1行";
+        @extend .text-ellipsis;
+  } @else {
+        // @debug "多行";
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box; // 作为弹性伸缩盒子模型显示。
+        -webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式--从上到下垂直排列
+        -webkit-line-clamp: #{$row}; // 显示的行
+  }
+}
\ No newline at end of file
diff --git a/src/assets/scss/mixin.scss b/src/assets/scss/mixin.scss
new file mode 100644
index 0000000..5736d22
--- /dev/null
+++ b/src/assets/scss/mixin.scss
@@ -0,0 +1,191 @@
+// 清除浮动
+@mixin clearfix {
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+}
+ 
+// 多行隐藏
+@mixin textoverflow($clamp:1) {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -o-text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: $clamp;
+  /*! autoprefixer: ignore next */
+  -webkit-box-orient: vertical;
+}
+
+//flex box
+@mixin flexbox($jc:space-between, $ai:center, $fd:row, $fw:nowrap) {
+  display: flex;
+  display: -webkit-flex;
+  flex: 1;
+  justify-content: $jc;
+  -webkit-justify-content: $jc;
+  align-items: $ai;
+  -webkit-align-items: $ai;
+  flex-direction: $fd;
+  -webkit-flex-direction: $fd;
+  flex-wrap: $fw;
+  -webkit-flex-wrap: $fw;
+}
+
+
+/* 移动端页面设计稿宽度 */
+$design-width: 750;
+/* 移动端页面设计稿dpr基准值 */
+$design-dpr: 2;
+/* 将移动端页面分为10块 */
+$blocks: 10;
+/* 缩放所支持的设备最小宽度 */
+$min-device-width: 320px;
+/* 缩放所支持的设备最大宽度 */
+$max-device-width: 750px;
+
+/*
+    rem与px对应关系，1rem代表html font-size值（为一块的宽度），$rem即为$px对应占多少块
+
+        $px                    $rem
+    -------------    ===    ------------
+    $design-width              $blocks
+*/
+
+/* html根元素的font-size定义，简单地将页面分为$blocks块，方便计算 */
+@mixin root-font-size() {
+    font-size: calc(100vw / $blocks);
+
+    body {
+        @include container-min-width();
+    }
+
+    /* 最小宽度定义 */
+    @media screen and (max-width: $min-device-width) {
+        font-size: calc($min-device-width / $blocks);
+    }
+
+    /* 最大宽度定义 */
+    &[data-content-max] {
+        body[data-content-max] {
+            @include container-max-width();
+        }
+
+        @media screen and (min-width: $max-device-width) {
+            font-size: calc($max-device-width / $blocks);
+        }
+    }
+}
+
+/* 单位px转化为rem */
+@function px2rem($px) {
+    @return #{$px / $design-width * $blocks}rem;
+}
+
+/* 单位rem转化为px，可用于根据rem单位快速计算原px */
+@function rem2px($rem) {
+    @return #{$rem / $blocks * $design-width}px;
+}
+
+/**
+ * 实现固定宽高比
+ * @param  {string} $position: relative      定位方式
+ * @param  {string} $width:    100%          容器宽度
+ * @param  {string} $sub:      null          容器的目标子元素
+ * @param  {number} $aspectX:  1             容器宽
+ * @param  {number} $aspectY:  1             容器高
+ */
+@mixin aspect-ratio($position: relative,
+    $width: 100%,
+    $sub: null,
+    $aspectX: 1,
+    $aspectY: 1) {
+    overflow: hidden;
+    position: $position;
+    padding-top: percentage($aspectY / $aspectX);
+    width: $width;
+    height: 0;
+
+    @if $sub==null {
+        $sub: "*";
+    }
+
+    &>#{$sub} {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+    }
+}
+
+/* 设置容器拉伸的最小宽度 */
+@mixin container-min-width() {
+    margin-right: auto;
+    margin-left: auto;
+    min-width: $min-device-width;
+}
+
+/* 设置容器拉伸的最大宽度 */
+@mixin container-max-width() {
+    margin-right: auto;
+    margin-left: auto;
+    max-width: $max-device-width;
+}
+
+/* 设置字体大小，不使用rem单位， 根据dpr值分段调整 */
+@mixin font-size($fontSize) {
+    font-size: $fontSize / $design-dpr;
+
+    [data-dpr="2"] & {
+        font-size: $fontSize / $design-dpr * 2;
+    }
+
+    [data-dpr="3"] & {
+        font-size: $fontSize / $design-dpr * 3;
+    }
+}
+
+/* 清除浮动 */
+@mixin clearfix {
+    *zoom: 1;
+
+    &:after {
+        content: "";
+        display: block;
+        height: 0;
+        visibility: hidden;
+        clear: both;
+    }
+}
+
+/*
+*$line:超出显示几行省略号
+*$substract:预留区域百分比
+*/
+@mixin text-overflow($line:1, $substract:0) {
+    overflow: hidden;
+
+    @if $line==1 {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        width: 100% -$substract;
+    }
+
+    @else {
+        display: -webkit-box;
+        -webkit-line-clamp: $line;
+        -webkit-box-orient: vertical;
+    }
+}
+
+
+
+
+
+@mixin WH($Width:100%, $Height:100%) {
+    width: $Width;
+    height: $Height;
+}
\ No newline at end of file
diff --git a/src/assets/scss/reset.scss b/src/assets/scss/reset.scss
new file mode 100644
index 0000000..c23179c
--- /dev/null
+++ b/src/assets/scss/reset.scss
@@ -0,0 +1,60 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v4.0 | 20180602
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, menu, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+main, menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, main, menu, nav, section {
+	display: block;
+}
+/* HTML5 hidden-attribute fix for newer browsers */
+*[hidden] {
+    display: none;
+}
+body {
+	line-height: 1;
+}
+menu, ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+img{
+    border: none;
+}
+
+/* 去除iPhone中默认的input样式 */
+input[type="submit"],input[type="reset"],input[type="button"],input:focus,button:focus,select:focus,textarea:focus{ outline: none;}
+input{-webkit-appearance:none; resize: none; border-radius: 0;}
+
diff --git a/src/assets/scss/variables.scss b/src/assets/scss/variables.scss
new file mode 100644
index 0000000..dd5a2e5
--- /dev/null
+++ b/src/assets/scss/variables.scss
@@ -0,0 +1,73 @@
+$background-color: #eeeeee;
+$title: 18px;
+$primary: #b42e46;
+$positionList: (relative, absolute, fixed);
+$displayList: (flex, block, inline-block, none);
+$flexCommonValues: (
+      start: flex-start,
+      center: center,
+      end: flex-end,
+);
+$justify-content-values: (
+      start: flex-start,
+      center: center,
+      between: space-between,
+      around: space-around,
+      evenly: space-evenly,
+      end: flex-end,
+);
+$align-items-values: (
+      start: flex-start,
+      center: center,
+      end: flex-end,
+);
+$overflowDirs: (overflow, overflow-x, overflow-y);
+$spaceTypes_Dirs: (
+      "p": padding,
+      "m": margin,
+      "ps": padding-left,
+      "pe": padding-right,
+      "pt": padding-top,
+      "pb": padding-bottom,
+      "ms": margin-left,
+      "me": margin-right,
+      "mt": margin-top,
+      "mb": margin-bottom,
+);
+$positionTypes: (
+      "top": top,
+      "bottom": bottom,
+      "left": left,
+      "right": right,
+      "start": left,
+      "end": right,
+);
+$colors: (
+      primary: $primary,
+      white: #ffffff,
+      muted: #6c757d,
+      black: #000,
+      dark: #333,
+      bgPrimary: "#303c5a",
+      red: red,
+      immediateColor: #94765c,
+);
+$radiusList: (
+      circle: 100%,
+      pill: 50rem,
+);
+$fontSizeS: (
+      6: 3.2vw,
+      5: calc(3.2vw * 1.1),
+      4: calc(3.2vw * 1.2),
+      3: calc(3.2vw * 1.3),
+      2: calc(3.2vw * 1.4),
+      1: calc(3.2vw * 1.5),
+);
+$textAlignDirs: (left, center, right);
+//导出js变量
+:export {
+      primary: $primary;
+      bgPrimary: "#303c5a";
+      muted: #6c757d;
+}