首页 样式修改

src/views/index.vue

@@ -25,21 +25,27 @@
     <div class="today">
       <!-- 今日概括 -->
       <div class="todayitem">
-        今日上架商品数量
-        <span>{{ summaryTodayList.goodsCount }}</span>
+        <div class="el-icon-sell icon"></div>
+        <div class="goodsinfo">今日上架商品数量</div>
+        <div class="totals">{{ summaryTodayList.goodsCount }}</div>
       </div>
       <div class="todayitem">
-        今日新增会员数
-        <span>{{ summaryTodayList.patientCount }}</span>
+        <div class="el-icon-user icon"></div>
+        <div class="goodsinfo">今日新增会员数</div>
+        <div class="totals">{{ summaryTodayList.patientCount }}</div>
       </div>
       <div class="todayitem">
-        今日订单数
-        <span>{{ summaryTodayList.orderCount }}</span>
+        <div class="el-icon-shopping-cart-full icon"></div>
+        <div class="goodsinfo">今日订单数</div>
+        <div class="totals">{{ summaryTodayList.orderCount }}</div>
       </div>
       <div class="todayitem">
-        今日交易额
-        <span>{{ summaryTodayList.totalPrice }}</span>
+         <div class="el-icon-money icon"></div>
+         <div class="goodsinfo">今日交易额</div>
+        <div class="totals">{{ summaryTodayList.totalPrice }}</div>
       </div>
+
+
     </div>
     <el-row>
       <el-col :span="12">
@@ -406,8 +412,8 @@ export default {
   width: 30%;
   background-image: linear-gradient(
     109.6deg,
-    rgba(255, 113, 113, 0.6) 11.2%,
-    #ff7171 100.2%
+    rgba(111, 167, 183, 0.6) 11.2%,
+    #b3e9d8 100.2%
   );
   transition: 0.35s;
   -webkit-box-shadow: 1px 3px 12px rgb(255 113 113 / 30%);
@@ -425,8 +431,8 @@ export default {
 .member {
   background-image: linear-gradient(
     109.6deg,
-    rgba(255, 170, 113, 0.6) 11.2%,
-    #ffaa71 100.2%
+    rgba(161, 191, 239, 0.6) 11.2%,
+    #86c5e2 100.2%
   );
   -webkit-box-shadow: 1px 3px 12px rgb(255 170 113 / 30%);
   box-shadow: 1px 3px 12px rgb(255 170 113 / 30%);
@@ -434,8 +440,8 @@ export default {
 .order {
   background-image: linear-gradient(
     109.6deg,
-    rgba(147, 181, 225, 0.6) 11.2%,
-    #93b5e1 100.2%
+    rgba(161, 191, 214, 0.6) 11.2%,
+    #688eab 100.2%
   );
   -webkit-box-shadow: 1px 3px 12px rgb(147 181 225 / 30%);
   box-shadow: 1px 3px 12px rgb(147 181 225 / 30%);
@@ -443,8 +449,8 @@ export default {
 .shop {
   background-image: linear-gradient(
     109.6deg,
-    rgba(132, 140, 207, 0.6) 11.2%,
-    #848ccf 100.2%
+    rgba(138, 203, 158, 0.6) 11.2%,
+    #81c195 100.2%
   );
   -webkit-box-shadow: 1px 3px 12px rgb(132 140 207 / 30%);
   box-shadow: 1px 3px 12px rgb(132 140 207 / 30%);
@@ -460,31 +466,21 @@ export default {
   margin-left: 35%;
   font-size: 13px;
 }
+.icon {
+  margin-top: 10px;
+  margin-left: 16px;
+  font-size: 31px;
+  position: absolute;
+}
 .icons {
-  // display:inline-block;
   margin-top: 30px;
   margin-left: 35px;
   position: absolute;
   font-size: 31px;
-  // font-family: Ionicons;
-  // speak: none;
-  // font-style: normal;
-  // font-weight: 400;
-  // font-variant: normal;
-  // text-transform: none;
-  // text-rendering: optimizeLegibility;
-  // line-height: 1;
-  // -webkit-font-smoothing: antialiased;
-  // -moz-osx-font-smoothing: grayscale;
-  // vertical-align: -0.125em;
-  // text-align: center;
 }
 .today {
-  // background: #ff7171;
-  // padding: 0 30px;
   width: 100%;
   display: flex;
-
   margin-top: 10px;
   margin-left: -10px;
 }
@@ -496,11 +492,16 @@ export default {
   margin-bottom: 20px;
   border-radius: 0.4em;
   font-weight: 700;
-  background: hsla(0, 0%, 92.2%, 0.5333333333333333);
+  background: hsla(0,0%,92.2%,.5333333333333333);
   padding: 20px;
-  span {
-    display: block;
+  .goodsinfo {
+    margin-top: 5px;
+    margin-left: 32%;
+  }
+  .totals {
     color: #ff5c58;
+    margin-left: 32%;
+    margin-top: 5px;
     font-size: 21px;
   }
 }