From b8673a1d1ea296133b400923aaea6a2b53c9609b Mon Sep 17 00:00:00 2001
From: panqihua <panqihua@melt.icu>
Date: Thu, 26 Jan 2023 23:51:15 +0800
Subject: [PATCH] =?UTF-8?q?1.=E5=8E=82=E5=95=86-=E9=A6=96=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/manufacturer/index.vue | 391 ++++++++++++++++++++++++++++++-
 1 file changed, 388 insertions(+), 3 deletions(-)

diff --git a/src/views/manufacturer/index.vue b/src/views/manufacturer/index.vue
index e5a575c..a836c81 100644
--- a/src/views/manufacturer/index.vue
+++ b/src/views/manufacturer/index.vue
@@ -1,15 +1,400 @@
 <template>
   <div class="app-container">
-    厂商首页
+    <div class="renew-tip">
+      <span class="tip">您的账号还剩4天即将到期，到期后讲影响正常使用，请尽快续费</span>
+      <a href="#" class="renew">立即续费</a>
+    </div>
+    <el-row class="mt" :gutter="20">
+      <el-col :span="18">
+        <el-card>
+          <div class="title">数据汇总</div>
+          <el-row type="flex" class="sum mt" justify="space-between">
+            <el-col :span="5">
+              <div class="value">131344</div>
+              <div class="label">总销售数量</div>
+            </el-col>
+            <el-col :span="5">
+              <div class="value">131344</div>
+              <div class="label">建议零售价销售额</div>
+            </el-col>
+            <el-col :span="5">
+              <div class="value">131344</div>
+              <div class="percent">环比：<i class="el-icon-top"></i>12.3%</div>
+              <div class="percent">周同比：<i class="el-icon-down"></i>12.3%</div>
+              <div class="label">销售数量</div>
+            </el-col>
+            <el-col :span="5">
+              <div class="value">1313443.00</div>
+              <div class="percent">环比：<i class="el-icon-top"></i>12.3%</div>
+              <div class="percent">周同比：<i class="el-icon-down"></i>12.3%</div>
+              <div class="label">建议零售价销售量</div>
+            </el-col>
+          </el-row>
+          <div class="title mt-5">快捷入口</div>
+          <el-row type="flex" class="shortcut mt">
+            <el-col :span="4">
+              <div>20</div>
+              <div>待授权经销商</div>
+            </el-col>
+
+            <el-col :span="4" class="ml20">
+              <div>20</div>
+              <div>待授权直营门店</div>
+            </el-col>
+            <el-col :span="4" class="ml20">
+              <div>20</div>
+              <div>我的经销商</div>
+            </el-col>
+            <el-col :span="4" class="ml20">
+              <div>20</div>
+              <div>我的直营门店</div>
+            </el-col>
+          </el-row>
+          <div class="title mt">销售数据</div>
+          <div ref="chart" class="chart"></div>
+          <el-row class="title mt" type="flex" justify="space-between">
+            <el-col>商品销售排行榜top5</el-col>
+            <el-col class="query">
+              <span class="active">今日</span>
+              <span>昨日</span>
+              <span>本周</span>
+              <span>上周</span>
+              <span>本月</span>
+              <span>上月</span>
+            </el-col>
+          </el-row>
+          <el-row type="flex" class="rank-item mt-3" v-for="item in 5" :key="item">
+            <el-col :span="3">
+              <div class="circle" :class="{default:item>3}">{{ item }}</div>
+            </el-col>
+            <el-col :span="5">联想笔记本</el-col>
+            <el-col :offset="12" class="num">99999</el-col>
+          </el-row>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card class="time">
+          <div><span class="address">郑州市</span><span class="week ml20">星期六</span></div>
+          <div class="mt10 date">公历：2022年12月31日</div>
+          <div class="mt10 date">农历：2022年11月30日</div>
+        </el-card>
+        <el-card class="info mt10">
+          <el-row type="flex">
+            <el-col class="title">用户信息</el-col>
+            <el-col class="status">审核中</el-col>
+          </el-row>
+          <div class="name mt10">
+            <el-avatar :size="50" src="http://www.dummyimage.com/50x50"></el-avatar>
+
+            <div class="content ml10">
+              <span>张三</span>
+              <span>厂商名称</span>
+            </div>
+          </div>
+          <div class="text-center mt10">到期时间</div>
+          <div class="text-center mt10">2022-12-31 10:38</div>
+          <div class="text-center mt10">
+            <el-button round>购买</el-button>
+          </div>
+
+        </el-card>
+        <el-card class="notice mt10">
+          <el-row type="flex">
+            <el-col class="title">系统通知</el-col>
+            <el-col class="all">全部<i class="el-icon-arrow-right"></i></el-col>
+          </el-row>
+          <template v-for="item in 2">
+            <div class="item">
+              <div class="time mt10">2021-12-12 10:30</div>
+              <el-row class="content mt10">
+                <el-col :span="4">
+                  <img src="http://www.dummyimage.com/50x50"/>
+                </el-col>
+                <el-col :span="20" class="right">
+                  <div>
+                    <span class="title">祈福的历史</span>
+                    <div class="status"></div>
+                  </div>
+                  <div class="content">{{ '1'.repeat(50) }}</div>
+                </el-col>
+              </el-row>
+            </div>
+            <el-divider/>
+          </template>
+        </el-card>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
+import echarts from '@/plugins/echarts'
+
 export default {
-  name: 'index.vue'
+  name: 'index.vue',
+  mounted() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      let myChart = echarts.init(this.$refs.chart)
+      let option
+
+      option = {
+        legend: {},
+        xAxis: {
+          type: 'category',
+          data: Array.from(new Array(5).keys()).map(item => `${item + 1}月`)
+        },
+        yAxis: {
+          type: 'value'
+        },
+        tooltip: {
+          show: true,
+          trigger: 'axis'
+        },
+        series: [
+          {
+            name: '数量',
+            data: Array.from(new Array(5).keys()).map(item => Math.round(Math.random() * 500)),
+            type: 'line'
+          },
+          {
+            name: '金额',
+            data: Array.from(new Array(12).keys()).map(item => Math.round(Math.random() * 500)),
+            type: 'line'
+          }
+        ]
+      }
+
+      option && myChart.setOption(option)
+
+    }
+  }
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+$circle-radius: 25px;
+.notice {
+  padding-bottom: 100px;
+
+  .all {
+    text-align: right;
+    color: rgba(154, 154, 154, 1);
+    font-size: 14px;
+    font-family: SourceHanSansSC-regular;
+  }
+
+  .item {
+    & > .time {
+      color: rgba(168, 168, 168, 1);
+      font-size: 14px;
+    }
+
+    & > .content {
+      display: flex;
+
+
+      & > .right {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        font-family: PingFangSC-regular;
+
+        .title {
+          color: rgba(16, 16, 16, 1);
+          font-size: 12px;
+        }
+
+        .content {
+          color: rgba(174, 174, 174, 1);
+          font-size: 12px;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          overflow-x: hidden;
+          width: 100%;
+        }
+
+
+        .title, .content {
+          padding: 0 10px;
+        }
+      }
+
+
+    }
+  }
+}
+
+.info {
+  font-size: 14px;
+  text-align: left;
+  font-family: SourceHanSansSC-regular;
+
+  .status {
+    color: rgba(22, 132, 252, 1);
+  }
+
+  .name {
+    color: rgba(16, 16, 16, 1);
+
+    display: flex;
+
+    & > .content {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+
+    }
+  }
+}
+
+.time {
+  .address, .week {
+    color: rgba(16, 16, 16, 1);
+    font-size: 16px;
+    text-align: left;
+    font-family: SourceHanSansSC-regular;
+  }
+
+  .date {
+    color: rgba(154, 154, 154, 1);
+    font-size: 14px;
+    text-align: left;
+    font-family: SourceHanSansSC-regular;
+  }
+}
+
+.mt-3 {
+  margin-top: 30px;
+}
+
+.rank-item {
+  align-items: center;
+  color: rgba(16, 16, 16, 1);
+  font-size: 14px;
+  text-align: left;
+  font-family: SourceHanSansSC-regular;
+
+
+  .circle {
+    background-color: #000;
+    color: white;
+    border-radius: 50%;
+    width: $circle-radius;
+    height: $circle-radius;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .circle.default {
+    background-color: rgba(190, 190, 190, 1);
+  }
+
+  & > .num {
+    text-align: right;
+    padding-right: 10%;
+  }
+
+}
+
+.query {
+  text-align: right;
+
+  & > span {
+    margin-right: 10px;
+
+  }
+
+  & > span.active {
+    color: blue;
+  }
+}
+
+.chart {
+  height: 400px;
+}
+
+.shortcut {
+  & > div {
+    border-radius: 4px;
+    background-color: rgba(239, 239, 239, 1);
+    color: rgba(16, 16, 16, 1);
+    font-size: 14px;
+    text-align: center;
+    font-family: Roboto;
+    padding: 10px 0;
+    height: 75px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+  }
+}
+
+.mt {
+  margin-top: 10px;
+}
+
+.mt-5 {
+  margin-top: 50px;
+}
+
+.ml20 {
+  margin-left: 20px;
+}
+
+.title {
+  color: rgba(16, 16, 16, 1);
+  font-size: 16px;
+  text-align: left;
+  font-family: SourceHanSansSC-regular;
+}
+
+.sum {
+  & > div {
+    background-color: #efefef;
+    text-align: center;
+    height: 120px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    padding: 10px 0;
+    border-radius: 4px;
+
+    font-family: SourceHanSansSC-regular;
+
+    & > .value {
+      color: rgba(16, 16, 16, 1);
+      font-size: 18px;
+    }
+
+    & > .label {
+      color: rgba(108, 108, 108, 1);
+      font-size: 12px;
+    }
+  }
+}
+
+.renew-tip {
+  border-radius: 4px;
+  background-color: rgba(255, 51, 51, 0.15);
+  padding: 20px;
+
+
+  font-size: 14px;
+  text-align: left;
+  font-family: SourceHanSansSC-regular;
+
+  & > .tip {
+    color: rgba(16, 16, 16, 1);
+  }
+
+  & > .renew {
+    margin-left: 20px;
+    color: blue;
+  }
+}
 
 </style>