feat: 新增样式文件

src/App.vue

@@ -16,6 +16,7 @@ onHide(() => {
 
 <style lang="scss">
 @import "@/static/fonts/iconfont.css";
+@import "@/static/scss/index.scss";
 
 /* 添加全局样式 */
 page,

src/pages/index/components/chat/ChatMoreTips/index.vue

@@ -6,7 +6,10 @@
         v-for="(item, index) in itemList"
         :key="index"
       >
-        <view class="more-tips-item-title" @click="sendReply(item)">
+        <view
+          class="more-tips-item-title font-500 font-size-12 line-height-24 text-center"
+          @click="sendReply(item)"
+        >
           {{ item }}
         </view>
       </view>

src/pages/index/components/chat/ChatMoreTips/styles/index.scss

@@ -24,11 +24,7 @@
     position: relative;
 
     .more-tips-item-title {
-      font-weight: 500;
-      font-size: $uni-font-size-sm;
       color: #00a6ff;
-      line-height: 24px;
-      text-align: center;
       white-space: nowrap;
     }
   }

src/static/scss/background.scss

@@ -0,0 +1,8 @@
+// 背景颜色
+.bg-white {
+  background-color: #fff;
+}
+
+.bg-gray {
+  background-color: #f5f5f5;
+}

src/static/scss/border.scss

@@ -0,0 +1,4 @@
+// 边框
+.border {
+  border: 1px solid #000;
+}

src/static/scss/colors.scss

@@ -0,0 +1,17 @@
+// 字体颜色
+
+.color-white {
+  color: #fff;
+}
+
+.color-33 {
+  color: #333;
+}
+
+.color-66 {
+  color: #666;
+}
+
+.color-99 {
+  color: #999;
+}

src/static/scss/display.scss

@@ -0,0 +1,16 @@
+// 显示类型
+.block {
+  display: block;
+}
+
+.inline-block {
+  display: inline-block;
+}
+
+.flex {
+  display: flex;
+}
+
+.grid {
+  display: grid;
+}

src/static/scss/ellipsis.scss

@@ -0,0 +1,13 @@
+// 省略号
+.ellipsis-1 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ellipsis-2 {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}

src/static/scss/flex.scss

@@ -0,0 +1,20 @@
+// 弹性布局
+.flex {
+  display: flex;
+}
+
+.flex-items-center {
+  align-items: center;
+}
+
+.flex-justify-center {
+  justify-content: center;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}

src/static/scss/font-family.scss

@@ -0,0 +1,4 @@
+// 字体-family
+.font-family-sans-serif {
+  font-family: sans-serif;
+}

src/static/scss/font-size.scss

@@ -0,0 +1,20 @@
+// 字体-size
+.font-size-12 {
+  font-size: 12px;
+}
+
+.font-size-14 {
+  font-size: 14px;
+}
+
+.font-size-16 {
+  font-size: 16px;
+}
+
+.font-size-18 {
+  font-size: 18px;
+}
+
+.font-size-20 {
+  font-size: 20px;
+}

src/static/scss/font-weight.scss

@@ -0,0 +1,20 @@
+// 字体-weight
+.font-bold {
+  font-weight: bold;
+}
+
+.font-400 {
+  font-weight: 400;
+}
+
+.font-500 {
+  font-weight: 500;
+}
+
+.font-600 {
+  font-weight: 600;
+}
+
+.font-700 {
+  font-weight: 700;
+}

src/static/scss/index.scss

@@ -0,0 +1,19 @@
+@import "./background.scss";
+@import "./border.scss";
+@import "./colors.scss";
+@import "./display.scss";
+@import "./flex.scss";
+@import "./font-weight.scss";
+@import "./height.scss";
+@import "./line-height.scss";
+@import "./margin.scss";
+@import "./padding.scss";
+@import "./font-size.scss";
+@import "./font-family.scss";
+@import "./text-align.scss";
+@import "./rounded.scss";
+@import "./ellipsis.scss";
+@import "./position.scss";
+@import "./scroll.scss";
+@import "./overflow.scss";
+@import "./width.scss";

src/static/scss/line-height.scss

@@ -0,0 +1,20 @@
+// 行高
+.line-height-17 {
+  line-height: 17px;
+}
+
+.line-height-18 {
+  line-height: 18px;
+}
+
+.line-height-20 {
+  line-height: 20px;
+}
+
+.line-height-21 {
+  line-height: 21px;
+}
+
+.line-height-22 {
+  line-height: 22px;
+}

src/static/scss/margin.scss

@@ -0,0 +1,8 @@
+// 外边距-bottom
+.mb-10 {
+  margin-bottom: 10px;
+}
+
+.mb-12 {
+  margin-bottom: 12px;
+}

src/static/scss/overflow.scss

@@ -0,0 +1,4 @@
+// 溢出
+.overflow-hidden {
+  overflow: hidden;
+}

src/static/scss/padding.scss

@@ -0,0 +1,20 @@
+// 内边距
+.p-12 {
+  padding: 12px;
+}
+
+.pt-12 {
+  padding-top: 12px;
+}
+
+.pr-12 {
+  padding-right: 12px;
+}
+
+.pb-12 {
+  padding-bottom: 12px;
+}
+
+.pl-12 {
+  padding-left: 12px;
+}

src/static/scss/position.scss

@@ -0,0 +1,8 @@
+// 定位
+.relative {
+  position: relative;
+}
+
+.absolute {
+  position: absolute;
+}

src/static/scss/rounded.scss

@@ -0,0 +1,16 @@
+// 圆角
+.rounded-4 {
+  border-radius: 4px;
+}
+
+.rounded-8 {
+  border-radius: 8px;
+}
+
+.rounded-12 {
+  border-radius: 12px;
+}
+
+.rounded-full {
+  border-radius: 50%;
+}

src/static/scss/scroll.scss

@@ -0,0 +1,8 @@
+// 滚动条
+.scroll-y {
+  overflow-y: auto;
+}
+
+.scroll-x {
+  overflow-x: auto;
+}

src/static/scss/text-align.scss

@@ -0,0 +1,12 @@
+// 文本-align
+.text-center {
+  text-align: center;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-right {
+  text-align: right;
+}

src/static/scss/width.scss

@@ -0,0 +1,7 @@
+.w-full {
+  width: 100%;
+}
+
+.w-50 {
+  width: 50%;
+}