提交

src/api/modules/http.js

@@ -864,7 +864,7 @@ export function theCirculation(query) {
 // 更新记录列表
 export function updateListApi(data) {
   return request({
-    url: 'autoSR/api/zkMessage/messagePage',
+    url: 'autoSR/api/zkMessage/findByPage',
     method: 'get',
     params: data
   })
@@ -892,4 +892,23 @@ export function updateDelApi(params) {
     method: 'get',
     params
   })
+}
+
+// 升级公告
+export function messageList(params) {
+  return request({
+    url: 'autoSR/api/zkMessage/messageList',
+    method: 'get',
+    params
+  })
+}
+
+
+// 升级公告更新阅读
+export function	updateRead(params) {
+  return request({
+    url: 'autoSR/api/zkMessage/updateFlag',
+    method: 'get',
+    params
+  })
 }

src/main.js

@@ -21,6 +21,10 @@ import basicContainer from './components/basic-container/main'
 import api from './api'
 
 
+import 'echarts'
+import ECharts from 'vue-echarts'
+Vue.component('v-chart', ECharts)
+
 import AudioPlayer from '@liripeng/vue-audio-player'
 // import '@liripeng/vue-audio-player/lib/vue-audio-player.css'
 

src/page/index/top/index.vue

@@ -88,23 +88,43 @@
         </div>
       </el-tooltip>
     <!--  暂时注释下一版本开发上线 -->
-      <!-- <el-popover placement="bottom" trigger="hover" width="350">
-        <el-table :data="gridData" @row-click="msgTap">
-          <el-table-column
-            width="324"
-            property="date"
-            :show-header="false"
-          >
-          <template slot-scope="scope">
-            <div class="date">
-              <span>{{ scope.row.dates }}</span>
-              <span>{{ scope.row.date }}</span>
-            </div>
-          </template>
-          </el-table-column>
-        </el-table>
-        <i slot="reference" class="el-icon-bell" style="font-size: 18px;color: #fff;"></i>
-      </el-popover> -->
+      <el-popover placement="bottom" trigger="hover" width="350" @show="getMessage">
+        <el-tabs v-model="activeName" @tab-click="handleClick">
+          <el-tab-pane label="接待报告" name="first">
+            <el-table :data="gridData" @row-click="msgTaps">
+              <el-table-column
+                width="324"
+                property="date"
+                :show-header="false"
+              >
+              <template slot-scope="scope">
+                <div class="date">
+                  <span>{{ scope.row.dates }}</span>
+                  <span>{{ scope.row.date }}</span>
+                </div>
+              </template>
+              </el-table-column>
+            </el-table>
+          </el-tab-pane>
+          <el-tab-pane label="升级公告" name="second">
+            <el-table :data="gridData" @row-click="msgTap">
+              <el-table-column
+                width="324"
+                property="date"
+                :show-header="false"
+              >
+              <template slot-scope="scope">
+                <div class="date">
+                  <span>{{ scope.row.title }}</span>
+                  <span>{{ scope.row.createTime }}</span>
+                </div>
+              </template>
+              </el-table-column>
+            </el-table>
+          </el-tab-pane>
+        </el-tabs>
+        <i slot="reference" @click="toMessageList" class="el-icon-bell" style="font-size: 18px;color: #fff;"></i>
+      </el-popover>
 
       <el-tooltip
         v-if="showTheme"
@@ -188,40 +208,8 @@ export default {
       companyName: localStorage.getItem("topName"),
       orgType: localStorage.getItem("orgType"),
       info: {},
-      gridData: [
-        {
-          date: '121',
-          dates: '阿达萨达撒',
-        },
-        {
-          dates: '阿达萨达撒',
-          date: '122'
-        },
-        {
-          dates: '阿达萨达撒',
-          date: '132'
-        },
-        {
-          dates: '阿达萨达撒',
-          date: '125'
-        },
-        {
-          dates: '阿达萨达撒',
-          date: '126'
-        },
-        {
-          dates: '阿达萨达撒',
-          date: '172'
-        },
-        {
-          dates: '阿达萨达撒',
-          date: '182'
-        },
-        {
-          dates: '阿达萨达撒',
-          date: '120'
-        },
-      ]
+      activeName: 'first',
+      gridData: [], // 消息列表
     };
   },
   computed: {
@@ -254,12 +242,45 @@ export default {
     this.info = getStore({ name: "userInfo" });
   },
   methods: {
+    handleClick() {},
+    // 获取升级消息列表
+    getMessage() {
+      // 固定获取当前的项目的
+      let paramsData = {
+        id: '', // 
+        num: 1, // 第几页
+        size: 10, // 条数
+      }
+      this.$api.http.messageList(paramsData).then(res => {
+        console.log(res, 'asdkdakl;asdadl;skdasl;adskl;sadkl;dsak;ldsa;lksd')
+        if (res.success) {
+          this.gridData = res.data.list.records
+        }
+      }).catch(e => {
+        console.log(e)
+      })
+    },
+    // 跳转公告列表页面
+    toMessageList() {
+      this.$router.push('/message')
+    },
 
+    // 弹窗消息点击触发事件
+    msgTaps(e) {
+      console.log(e, 'asdjilksajl')
+      return
+
+      // 日报
+      // this.$router.push('/reportExcel/dayReport')
+      // 周报
+      // this.$router.push('/reportExcel/weekReport')
+    },
 
     // 弹窗消息点击触发事件
     msgTap(e) {
       console.log(e, 'asdjilksajl')
-      this.$router.push('/message')
+      this.$store.commit('setMessage', e)
+      this.$router.push('/message/detail')
     },
 
     handleScreen() {

src/router/page/index.js

@@ -14,12 +14,36 @@ export default [{
   path: '/wel',
   component: Layout,
   redirect: '/wel/index',
-  children: [{
-    path: 'index',
-    name: '首页',
-    component: () =>
-      import(/* webpackChunkName: "views" */ '@/page/wel')
-  }]
+  children: [
+    {
+      path: 'index',
+      name: '首页',
+      component: () =>
+        import(/* webpackChunkName: "views" */ '@/page/wel')
+    },
+    {
+      path: '/message',
+      component: () => import(/* webpackChunkName: "views" */ '@/views/msg/index'),
+      name: '公告列表',
+    },
+
+    {
+      path: '/message/detail',
+      component: () => import(/* webpackChunkName: "views" */ '@/views/msg/detail'),
+      name: '公告详情',
+    },
+    {
+      path: '/reportExcel/dayReport',
+      component: () => import(/* webpackChunkName: "views" */ '@/views/reportExcel/dayReport'),
+      name: '报告详情', // 日报
+    },
+    {
+      path: '/reportExcel/weekReport',
+      component: () => import(/* webpackChunkName: "views" */ '@/views/reportExcel/weekReport'),
+      name: '报告详情', // 周报
+    }
+
+  ]
 },
 {
   path: '/lock',
@@ -134,17 +158,4 @@ export default [{
     isAuth: false
   }
 },
-
-
-{
-  path: '/message',
-  component: () => import(/* webpackChunkName: "views" */ '@/views/msg/index'),
-  name: '公告列表',
-},
-
-{
-  path: '/message/detail',
-  component: () => import(/* webpackChunkName: "views" */ '@/views/msg/detail'),
-  name: '公告详情',
-}
 ]

src/store/getters.js

@@ -22,6 +22,6 @@ const getters = {
   menuAll: state => state.user.menuAll,
   logsList: state => state.logs.logsList,
   logsLen: state => state.logs.logsList.length || 0,
-  logsFlag: (state, getters) => getters.logsLen === 0
+  logsFlag: (state, getters) => getters.logsLen === 0,
 }
 export default getters

src/store/index.js

@@ -8,13 +8,22 @@ import getters from './getters'
 
 Vue.use(Vuex)
 const store = new Vuex.Store({
+  state: {
+    messageObj: {}, // 信息对象
+  },
   modules: {
     user,
     common,
     logs,
     tags
   },
-  getters
+  getters,
+  mutations: {
+    // 储存消息详情
+    setMessage(state, obj) {
+      state.messageObj = obj
+    }
+  }
 })
 
 export default store

src/views/admin/log/msg.vue

@@ -1,6 +1,6 @@
 <template>
-  <div  class="box-center">
-    <div class="edit_container" style="margin-top:50px;">
+  <div class="box-center">
+    <div class="edit_container" style="margin-top: 50px">
       <div id="editor"></div>
     </div>
     <div style="margin-top: 10px">
@@ -15,7 +15,7 @@ export default {
   data() {
     return {
       content: ``,
-      editor:null,
+      editor: null,
     };
   },
 
@@ -26,16 +26,16 @@ export default {
     editor.config.placeholder = "placeholder";
     // 配置 server 接口地址
     // editor.config.uploadImgServer = "/upload-img";
-    editor.config.uploadImgShowBase64 = true
-    editor.config.zIndex = 500
+    editor.config.uploadImgShowBase64 = true;
+    editor.config.zIndex = 500;
     editor.create();
-    this.editor=editor
+    this.editor = editor;
   },
   methods: {
-    upload(){
-      let str=this.editor.txt.html()
+    upload() {
+      let str = this.editor.txt.html();
       console.log(str);
-    }
+    },
   },
 };
 </script>
@@ -46,5 +46,38 @@ export default {
   padding: 15px;
   min-width: 1000px;
   padding-bottom: 100px;
+
+  .app-top {
+    width: 100%;
+    background: #ffffff;
+    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
+    border-radius: 4px;
+    padding-top: 15px;
+    padding-bottom: 15px;
+  }
+  .app-titel {
+    width: 100%;
+    display: flex;
+    align-items: center;
+  }
+  .div-lab {
+    display: flex;
+    margin: 5px;
+  }
+  .label {
+    font-size: 14px;
+    font-weight: 400;
+    color: #32363d;
+    line-height: 14px;
+    margin-left: 15px;
+    display: flex;
+    align-items: center;
+  }
+  .cen-tab {
+    width: 100%;
+    padding: 15px;
+    background: #ffffff;
+    margin-top: 15px;
+  }
 }
 </style>

src/views/msg/detail.vue

@@ -1,24 +1,16 @@
 <template>
   <div class="app-container calendar-list-container">
-    <!-- 顶部导航栏 -->
-    <div class="avue-layout">
-      <div class="avue-left">
-        <!-- 左侧导航栏 -->
-        <logo />
-      </div>
-    </div>
-    <div class="avue-header">
-      <top />
-    </div>
     <basic-container>
-      <template> <div v-html="detail"></div> </template>
+      <div class="top">
+        <span class="big">{{ objData.title }}</span>
+        <span class="desc">{{ objData.createTime }}</span>
+      </div>
+      <template> <div v-html="objData.content"></div> </template>
     </basic-container>
   </div>
 </template>
 
 <script>
-import top from "@/page/index/top/";
-import logo from "@/page/index/logo";
 export default {
   name: "Index",
   provide() {
@@ -27,16 +19,32 @@ export default {
     };
   },
   data() {
-    return {
-      detail: "详情内容<br/>文章内容巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉",
-    };
-  },
-  components: {
-    top,
-    logo,
+    return {};
   },
+  computed: {
+    objData() {
+      return this.$store.state.messageObj
+    }
+  }
 };
 </script>
 
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  flex-direction: column;
+
+  .big {
+    font-size: 18px;
+    font-weight: bold;
+  }
+
+  .desc {
+    margin-top: 1em;
+    font-size: 14px;
+    color: #999999;
+  }
+
+}
+</style>

src/views/msg/index.vue

@@ -1,16 +1,5 @@
 <template>
   <div class="app-container calendar-list-container">
-    <!-- 顶部导航栏 -->
-    <div class="avue-layout">
-      <div class="avue-left">
-        <!-- 左侧导航栏 -->
-        <logo />
-      </div>
-    </div>
-    <div class="avue-header">
-      <top />
-    </div>
-
     <basic-container>
       <template>
         <!-- 内容盒子 -->
@@ -24,11 +13,11 @@
             <el-table-column>
               <template slot-scope="scope">
                 <div class="line-box">
-                  <div class="title point">{{ scope.row.address }}</div>
+                  <div class="title" :class="{point: scope.row.readFlag == 0}">{{ scope.row.title }}</div>
                 </div>
               </template>
             </el-table-column>
-            <el-table-column prop="date" width="300"> </el-table-column>
+            <el-table-column prop="createTime" width="300"> </el-table-column>
           </el-table>
         </div>
 
@@ -37,11 +26,11 @@
             <el-pagination
               @size-change="handleSizeChange"
               @current-change="handleCurrentChange"
-              :current-page="currentPage4"
+              :current-page="currentPage"
               :page-sizes="[10, 20, 30, 40]"
-              :page-size="10"
+              :page-size="paramsObj.size"
               layout="total, sizes, prev, pager, next, jumper"
-              :total="100"
+              :total="total"
             >
             </el-pagination>
           </div>
@@ -52,74 +41,69 @@
 </template>
 
 <script>
-import top from "@/page/index/top/";
-import logo from "@/page/index/logo";
 export default {
-  components: {
-    top,
-    logo,
-  },
-    name: 'Index',
+  name: "Index",
   provide() {
     return {
-      Index: this
+      Index: this,
     };
   },
   data() {
     return {
-      currentPage4: 1,
-      tableData: [
-        {
-          date: "2016-05-02",
-          name: "王小虎",
-          province: "上海",
-          city: "普陀区",
-          address: "上海市普陀区金沙江路 1518 弄",
-          zip: 200333,
-          tag: "家",
-        },
-        {
-          date: "2016-05-04",
-          name: "王小虎",
-          province: "上海",
-          city: "普陀区",
-          address: "上海市普陀区金沙江路 1517 弄",
-          zip: 200333,
-          tag: "公司",
-        },
-        {
-          date: "2016-05-01",
-          name: "王小虎",
-          province: "上海",
-          city: "普陀区",
-          address: "上海市普陀区金沙江路 1519 弄",
-          zip: 200333,
-          tag: "家",
-        },
-        {
-          date: "2016-05-03",
-          name: "王小虎",
-          province: "上海",
-          city: "普陀区",
-          address: "上海市普陀区金沙江路 1516 弄",
-          zip: 200333,
-          tag: "公司",
-        },
-      ],
+      currentPage: 1,
+      tableData: [], // 数据列表数据
+      paramsObj: {
+        // 当前页面的参数
+        num: 1,
+        size: 10,
+      },
+
+      pageObj: {}, // 当前列表页的全部数据
     };
   },
+  computed: {
+    // 数据总条数
+    total() {
+      return this.pageObj.list.total
+    }
+  },
+
+  mounted() {
+    this.getMessageList()
+  },
+
   methods: {
+    // 获取公告列表
+    getMessageList() {
+      this.$api.http
+        .messageList(this.paramsObj)
+        .then((res) => {
+          if (res.success) {
+            this.tableData = res.data.list.records;
+            this.pageObj = res.data
+          }
+        })
+        .catch((e) => {
+          console.log(e);
+        });
+    },
+
     // 跳转详情页面
     toDetail(item) {
-      console.log(item, "123");
+      this.$store.commit('setMessage', item)
       this.$router.push("/message/detail");
     },
 
+    // 改变当前分页条数
     handleSizeChange(val) {
       console.log(`每页 ${val} 条`);
+      this.paramsObj.size = val
+      this.getMessageList()
+      
     },
     handleCurrentChange(val) {
-      console.log(`当前页: ${val}`);
+      this.paramsObj.num = val
+      this.getMessageList()
     },
   },
 };

src/views/reportExcel/dayReport.vue

@@ -0,0 +1,229 @@
+<template>
+  <div class="pages">
+    <div class="page-box">
+      <div class="head-box">
+        <p class="h-item">
+          <span class="titles">桃源山庄数智工牌日报</span>
+          <span>01月24日</span>
+        </p>
+        <p class="h-item" style="padding: 8px 0 0 0">
+          <span class="times">生成时间：2022-01-30 8:00</span>
+        </p>
+      </div>
+
+      <!-- 内容部分 -->
+      <div class="page-contanier">
+        <div class="item">
+          <span class="serial">01</span>
+          <div class="texts">接待量&nbsp;100</div>
+          <div class="texts">有效接待&nbsp;80</div>
+          <div class="texts">有效接待率&nbsp;80</div>
+          <div class="texts">对比昨天&nbsp;-5%</div>
+        </div>
+        <div class="item">
+          <span class="serial">02</span>
+          <div class="texts">销讲执行率&nbsp;100</div>
+          <div class="texts">对比昨天&nbsp;-5%</div>
+        </div>
+        <div class="item">
+          <span class="serial">03</span>
+          <div class="texts">销讲执行率&nbsp;100</div>
+          <div class="texts">对比昨天&nbsp;-5%</div>
+        </div>
+        <div class="item littles">
+          <span class="serial">04</span>
+          <div class="texts">销讲维度执行前三：</div>
+          <div class="list">
+            <div class="list-item">
+              <span class="left">1</span>
+              <span class="right">产品设计（100%）</span>
+            </div>
+            <div class="list-item">
+              <span class="left">2</span>
+              <span class="right">沙盘讲解（100%）</span>
+            </div>
+            <div class="list-item">
+              <span class="left">3</span>
+              <span class="right">品牌介绍（100%）</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="item littles">
+          <span class="serial">05</span>
+          <div class="texts">销讲维度执行弱项前三：</div>
+          <div class="list">
+            <div class="list-item">
+              <span class="left">1</span>
+              <span class="right">产品设计（100%）</span>
+            </div>
+            <div class="list-item">
+              <span class="left">2</span>
+              <span class="right">沙盘讲解（100%）</span>
+            </div>
+            <div class="list-item">
+              <span class="left">3</span>
+              <span class="right">品牌介绍（100%）</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="item littles">
+          <span class="serial">06</span>
+          <div class="texts">置业顾问平均执行率排名：</div>
+          <div class="list">
+            <div class="list-item">
+              <span class="left">1</span>
+              <span class="right">产品设计（100%）</span>
+            </div>
+            <div class="list-item">
+              <span class="left">2</span>
+              <span class="right">沙盘讲解（100%）</span>
+            </div>
+            <div class="list-item">
+              <span class="left">3</span>
+              <span class="right">品牌介绍（100%）</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="item littles">
+          <span class="serial">07</span>
+          <div class="texts">置业顾问平均接访录音排名：</div>
+          <div class="list">
+            <div class="list-item">
+              <span class="left">1</span>
+              <span class="right">产品设计（100%）</span>
+            </div>
+            <div class="list-item">
+              <span class="left">2</span>
+              <span class="right">沙盘讲解（100%）</span>
+            </div>
+            <div class="list-item">
+              <span class="left">3</span>
+              <span class="right">品牌介绍（100%）</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="item">
+          <span class="serial">08</span>
+          <div class="texts">执行率最低的顾问：孙俊&nbsp;34%</div>
+          <div class="texts">对比昨天&nbsp;-5%</div>
+        </div>
+
+        <div class="item">
+          <span class="serial">09</span>
+          <div class="texts">客户画像触达：&nbsp;897</div>
+        </div>
+
+        <div class="item">
+          <span class="serial">10</span>
+          <div class="texts">未标记接待数：&nbsp;15</div>
+        </div>
+
+        <div class="item">
+          <span class="serial">11</span>
+          <div class="texts">设备情况：在线15 离线4</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.pages {
+  margin: 20px 0 0 0;
+  padding: 0 16px;
+  width: 100%;
+
+  .page-box {
+    padding: 16px 18px;
+    background: #fff;
+
+    .head-box {
+      padding: 0 0 16px 0;
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      border-bottom: 1px solid #e0e0e0;
+
+      .h-item {
+        margin: 0;
+
+        .titles {
+          margin: 0 16px 0 0;
+          font-size: 18px;
+          font-weight: 500;
+        }
+
+        .times {
+          font-size: 14px;
+          color: #666666;
+        }
+      }
+    }
+
+    .page-contanier {
+      padding: 20px 0 0 0;
+      display: flex;
+      flex-wrap: wrap;
+
+      .item {
+        margin: 0 0 20px 0;
+        width: 100%;
+        display: flex;
+        align-items: center;
+
+        &.littles {
+          width: 25%;
+          flex-wrap: wrap;
+
+          .list {
+            margin: 12px 0 0 38px;
+            width: 75%;
+
+            .list-item {
+              margin-bottom: 12px;
+              display: flex;
+              align-content: center;
+
+              .left {
+                margin-right: 8px;
+                width: 20px;
+                height: 20px;
+                border-radius: 50%;
+                color: #fff;
+                background: #2671e2;
+                text-align: center;
+                line-height: 20px;
+              }
+            }
+          }
+        }
+
+        .serial {
+          padding: 4px;
+          border: 1px solid #999999;
+          font-size: 16px;
+          color: #333;
+          font-weight: 500;
+          border-radius: 4px;
+        }
+
+        .texts {
+          margin-left: 10px;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/reportExcel/weekReport.vue

@@ -0,0 +1,209 @@
+<template>
+  <div class="pages">
+    <div class="page-box">
+      <div class="head-box">
+        <p class="h-item">
+          <span class="titles">桃源山庄数智工牌日报</span>
+          <span>01月24日</span>
+        </p>
+        <p class="h-item" style="padding: 8px 0 0 0">
+          <span class="times">生成时间：2022-01-30 8:00</span>
+        </p>
+      </div>
+    </div>
+
+    <!-- 简报 -->
+    <div class="simple">
+      <div class="simple-title">数据简报</div>
+      <div class="simple-box">
+        <template v-for="(data, index) in 8">
+          <div class="simple-item" :key="index">
+            <div class="top-text">接待量 (次)</div>
+            <div class="middle-text">0</div>
+            <div class="bottom-text">
+              <span>对比上周:0</span>
+              <span class="b-t-text">--</span>
+            </div>
+          </div>
+        </template>
+      </div>
+    </div>
+
+    <!-- 排名 -->
+    <div class="ranking">
+      <div class="ranking-title">销讲场景执行排名</div>
+
+      <div class="ranking-box">
+        <div class="echart" id="mychart" :style="myChartStyle"></div>
+      </div>
+
+      <div class="ranking-desc">
+          销讲场景平均执行对比上周下跌12%，其中【送客执行】最强为99%，【区位介绍】执行最弱为25%；
+      </div>
+    </div>
+
+    <!-- 简报 -->
+    <div class="simple">
+      <div class="simple-title">顾问工作统计</div>
+      <div class="simple-boxs">
+          
+      </div>
+    </div>
+
+    <div class="bottom"></div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {
+      xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], //横坐标
+      yData: [23, 24, 18, 25, 27, 28, 25], //数据
+      myChartStyle: { width: "100%", height: "400px" }, //图表样式
+    };
+  },
+  mounted() {
+    this.initEcharts();
+  },
+
+  methods: {
+    initEcharts() {
+      // 基本柱状图
+      const option = {
+        xAxis: {
+          data: this.xData,
+        },
+        yAxis: {},
+        series: [
+          {
+            type: "bar", //形状为柱状图
+            barWidth: '40',
+            data: this.yData,
+          },
+        ],
+      };
+      const myChart = echarts.init(document.getElementById("mychart"));
+      myChart.setOption(option);
+      //随着屏幕大小调节图表
+      window.addEventListener("resize", () => {
+        myChart.resize();
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.pages {
+  margin: 20px 0 0 0;
+  padding: 0 16px;
+  width: 100%;
+
+  .page-box {
+    padding: 16px 18px;
+    background: #fff;
+
+    .head-box {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+
+      .h-item {
+        margin: 0;
+
+        .titles {
+          margin: 0 16px 0 0;
+          font-size: 18px;
+          font-weight: 500;
+        }
+
+        .times {
+          font-size: 14px;
+          color: #666666;
+        }
+      }
+    }
+  }
+
+  .simple {
+    margin: 16px 0 0 0;
+    padding: 16px 18px;
+    width: 100%;
+    background: #fff;
+
+    .simple-title {
+      font-size: 16px;
+      font-weight: 500;
+    }
+    .simple-box {
+      margin-top: 16px;
+      display: flex;
+      flex-wrap: wrap;
+
+      .simple-item {
+        position: relative;
+        margin: 0 20px 16px 0;
+        padding: 20px;
+        width: 370px;
+        height: 150px;
+        border: 1px solid #e0e0e0;
+        border-radius: 4px;
+        overflow: hidden;
+
+        &::before {
+          content: "";
+          display: block;
+          position: absolute;
+          z-index: 1;
+          right: -40px;
+          bottom: -40px;
+          width: 125px;
+          height: 125px;
+          border-radius: 50%;
+          border: 30px solid rgba($color: #2671e2, $alpha: 0.06);
+        }
+
+        &:nth-of-type(4n) {
+          margin: 0 0 16px 0;
+        }
+
+        .middle-text {
+          margin: 18px 0;
+          font-size: 32px;
+          font-weight: bold;
+        }
+
+        .bottom-text {
+          .b-t-text {
+            margin-left: 20px;
+          }
+        }
+      }
+    }
+  }
+
+  .ranking {
+    margin-top: 20px;
+    width: 100%;
+    background: #fff;
+    .ranking-title {
+      padding: 16px 18px;
+      border-bottom: 1px solid #e0e0e0;
+      font-size: 16px;
+      font-weight: 600;
+    }
+
+    .ranking-desc {
+        padding: 0 0 20px 0;
+        display: flex;
+        justify-content: center;
+    }
+  }
+
+  .bottom {
+      height: 100px;
+  }
+}
+</style>

vue.config.js

@@ -9,7 +9,7 @@
 // const url = 'http://192.168.31.100:9999' //王笑
 // const url = 'http://62.234.122.43:9999' //正式
 // const url = 'http://81.70.55.170:9999' // 新测试服务器IP
-// const url = 'http://192.168.31.89:9999' //sh
+// const url = 'http://192.168.31.86:9999' // 胜浩本地ip WiFi tuopu_new 
 // const url = 'https://zanyong.hfju.com' // 正式域名
 const url = 'http://81.70.55.170:9999' // 新测试
 // const url = 'http://82.156.35.22:9999' // 新正式ip