优化his_admin页面布局展示

src/assets/styles/common.scss

@@ -1,121 +1,121 @@
- /**
- * 通用css样式布局处理
- */
+/**
+* 通用css样式布局处理
+*/
 
- /** 基础通用 **/
+/** 基础通用 **/
 .pt5 {
-	padding-top: 5px;
+  padding-top: 5px;
 }
 .pr5 {
-	padding-right: 5px;
+  padding-right: 5px;
 }
 .pb5 {
-	padding-bottom: 5px;
+  padding-bottom: 5px;
 }
 .mt5 {
-	margin-top: 5px;
+  margin-top: 5px;
 }
 .mr5 {
-	margin-right: 5px;
+  margin-right: 5px;
 }
 .mb5 {
-	margin-bottom: 5px;
+  margin-bottom: 5px;
 }
 .mb8 {
-	margin-bottom: 8px;
+  margin-bottom: 8px;
 }
 .ml5 {
-	margin-left: 5px;
+  margin-left: 5px;
 }
 .mt10 {
-	margin-top: 10px;
+  margin-top: 10px;
 }
 .mr10 {
-	margin-right: 10px;
+  margin-right: 10px;
 }
 .mb10 {
-	margin-bottom: 10px;
+  margin-bottom: 10px;
 }
 .ml0 {
-	margin-left: 10px;
+  margin-left: 10px;
 }
 .mt20 {
-	margin-top: 20px;
+  margin-top: 20px;
 }
 .mr20 {
-	margin-right: 20px;
+  margin-right: 20px;
 }
 .mb20 {
-	margin-bottom: 20px;
+  margin-bottom: 20px;
 }
 .m20 {
-	margin-left: 20px;
+  margin-left: 20px;
 }
 
 .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
-	font-family: inherit;
-	font-weight: 500;
-	line-height: 1.1;
-	color: inherit;
+  font-family: inherit;
+  font-weight: 500;
+  line-height: 1.1;
+  color: inherit;
 }
 
 .el-dialog:not(.is-fullscreen) {
-	margin-top: 6vh !important;
+  margin-top: 6vh !important;
 }
 
 .el-dialog__wrapper.scrollbar .el-dialog .el-dialog__body {
-    overflow: auto;
-	overflow-x: hidden;
-	max-height: 70vh;
-	padding: 10px 20px 0;
+  overflow: auto;
+  overflow-x: hidden;
+  max-height: 70vh;
+  padding: 10px 20px 0;
 }
 
 .el-table {
-	.el-table__header-wrapper, .el-table__fixed-header-wrapper {
-		th {
-			word-break: break-word;
-			background-color: #f8f8f9;
-			color: #515a6e;
-			height: 40px;
-			font-size: 13px;
-		}
-	}
-	.el-table__body-wrapper {
-		.el-button [class*="el-icon-"] + span {
-			margin-left: 1px;
-		}
-	}
+  .el-table__header-wrapper, .el-table__fixed-header-wrapper {
+    th {
+      word-break: break-word;
+      background-color: #f8f8f9;
+      color: #515a6e;
+      height: 40px;
+      font-size: 13px;
+    }
+  }
+  .el-table__body-wrapper {
+    .el-button [class*="el-icon-"] + span {
+      margin-left: 1px;
+    }
+  }
 }
 
 /** 表单布局 **/
 .form-header {
-    font-size:15px;
-	color:#6379bb;
-	border-bottom:1px solid #ddd;
-	margin:8px 10px 25px 10px;
-	padding-bottom:5px
+  font-size:15px;
+  color:#6379bb;
+  border-bottom:1px solid #ddd;
+  margin:8px 10px 25px 10px;
+  padding-bottom:5px
 }
 
 /** 表格布局 **/
 .pagination-container {
-	position: relative;
-	height: 25px;
-	margin-bottom: 10px;
-	margin-top: 15px;
-	padding: 10px 20px !important;
+  position: relative;
+  height: 25px;
+  margin-bottom: 10px;
+  margin-top: 15px;
+  padding: 10px 20px !important;
 }
 
 /* tree border */
 .tree-border {
-    margin-top: 5px;
-    border: 1px solid #e5e6e7;
-    background: #FFFFFF none;
-    border-radius:4px;
+  margin-top: 5px;
+  border: 1px solid #e5e6e7;
+  background: #FFFFFF none;
+  border-radius:4px;
 }
 
 .pagination-container .el-pagination {
-	right: 0;
-	position: absolute;
+  right: 0;
+  position: absolute;
 }
 
 @media ( max-width : 768px) {
@@ -128,64 +128,64 @@
 }
 
 .el-table .fixed-width .el-button--mini {
-	padding-left: 0;
-	padding-right: 0;
-	width: inherit;
+  padding-left: 0;
+  padding-right: 0;
+  width: inherit;
 }
 
 /** 表格更多操作下拉样式 */
 .el-table .el-dropdown-link {
-	cursor: pointer;
-	color: #409EFF;
-	margin-left: 5px;
+  cursor: pointer;
+  color: #409EFF;
+  margin-left: 5px;
 }
 
 .el-table .el-dropdown, .el-icon-arrow-down {
-	font-size: 12px;
+  font-size: 12px;
 }
 
 .el-tree-node__content > .el-checkbox {
-	margin-right: 8px;
+  margin-right: 8px;
 }
 
 .list-group-striped > .list-group-item {
-	border-left: 0;
-	border-right: 0;
-	border-radius: 0;
-	padding-left: 0;
-	padding-right: 0;
+  border-left: 0;
+  border-right: 0;
+  border-radius: 0;
+  padding-left: 0;
+  padding-right: 0;
 }
 
 .list-group {
-	padding-left: 0px;
-	list-style: none;
+  padding-left: 0px;
+  list-style: none;
 }
 
 .list-group-item {
-	border-bottom: 1px solid #e7eaec;
-	border-top: 1px solid #e7eaec;
-	margin-bottom: -1px;
-	padding: 11px 0px;
-	font-size: 13px;
+  border-bottom: 1px solid #e7eaec;
+  border-top: 1px solid #e7eaec;
+  margin-bottom: -1px;
+  padding: 11px 0px;
+  font-size: 13px;
 }
 
 .pull-right {
-	float: right !important;
+  float: right !important;
 }
 
 .el-card__header {
-	padding: 14px 15px 7px;
-	min-height: 40px;
+  padding: 14px 15px 7px;
+  min-height: 40px;
 }
 
 .el-card__body {
-	padding: 15px 20px 20px 20px;
+  padding: 15px 20px 20px 20px;
 }
 
 .card-box {
-	padding-right: 15px;
-	padding-left: 15px;
-	margin-bottom: 10px;
+  padding-right: 15px;
+  padding-left: 15px;
+  margin-bottom: 10px;
 }
 
 /* button color */
@@ -211,62 +211,62 @@
 
 /* text color */
 .text-navy {
-	color: #1ab394;
+  color: #1ab394;
 }
 
 .text-primary {
-	color: inherit;
+  color: inherit;
 }
 
 .text-success {
-	color: #1c84c6;
+  color: #1c84c6;
 }
 
 .text-info {
-	color: #23c6c8;
+  color: #23c6c8;
 }
 
 .text-warning {
-	color: #f8ac59;
+  color: #f8ac59;
 }
 
 .text-danger {
-	color: #ed5565;
+  color: #ed5565;
 }
 
 .text-muted {
-	color: #888888;
+  color: #888888;
 }
 
 /* image */
 .img-circle {
-	border-radius: 50%;
+  border-radius: 50%;
 }
 
 .img-lg {
-	width: 120px;
-	height: 120px;
+  width: 120px;
+  height: 120px;
 }
 
 .avatar-upload-preview {
-	position: absolute;
-	top: 50%;
-	transform: translate(50%, -50%);
-	width: 200px;
-	height: 200px;
-	border-radius: 50%;
-	box-shadow: 0 0 4px #ccc;
-	overflow: hidden;
+  position: absolute;
+  top: 50%;
+  transform: translate(50%, -50%);
+  width: 200px;
+  height: 200px;
+  border-radius: 50%;
+  box-shadow: 0 0 4px #ccc;
+  overflow: hidden;
 }
 
 /* 拖拽列样式 */
 .sortable-ghost{
-	opacity: .8;
-	color: #fff!important;
-	background: #42b983!important;
+  opacity: .8;
+  color: #fff!important;
+  background: #42b983!important;
 }
 
 .top-right-btn {
-	position: relative;
-	float: right;
+  position: relative;
+  float: right;
 }

src/assets/styles/element-ui.scss

@@ -84,9 +84,9 @@
 }
 
 .el-menu--collapse
-  > div
-  > .el-submenu
-  > .el-submenu__title
-  .el-submenu__icon-arrow {
+> div
+> .el-submenu
+> .el-submenu__title
+.el-submenu__icon-arrow {
   display: none;
-}
+}

src/assets/styles/variables.scss

@@ -1,6 +1,6 @@
 // base color
 $blue:#324157;
-$light-blue:#3A71A8;
+$light-blue:#006CFF;
 $red:#C03639;
 $pink: #E65D6E;
 $green: #30B08F;
@@ -11,7 +11,7 @@ $panGreen: #30B08F;
 // 默认菜单主题风格
 $base-menu-color:#bfcbd9;
 $base-menu-color-active:#f4f4f5;
-$base-menu-background:#304156;
+$base-menu-background:#07052F;
 $base-logo-title-color: #ffffff;
 
 $base-menu-light-color:rgba(0,0,0,.70);

src/store/modules/settings.js

@@ -5,7 +5,7 @@ const { sideTheme, showSettings, topNav, tagsView, fixedHeader, sidebarLogo, dyn
 const storageSetting = JSON.parse(localStorage.getItem('layout-setting')) || ''
 const state = {
   title: '',
-  theme: storageSetting.theme || '#409EFF',
+  theme: storageSetting.theme || '#006CFF',
   sideTheme: storageSetting.sideTheme || sideTheme,
   showSettings: showSettings,
   topNav:  storageSetting.topNav === undefined ? topNav : storageSetting.topNav,

src/views/index.vue

@@ -2,183 +2,211 @@
   <div class="statistics-dashboard">
     <!-- 数据概览 (Data Overview) -->
     <el-card class="overview-section" shadow="never">
-      <div slot="header" class="header">
-        <span>数据概览</span>
-      </div>
-
       <el-row :gutter="20">
-        <el-col :span="3">
-          <div class="data-card">
-            <div class="card-title">
-              <i class="el-icon-user-solid"></i>
-              分公司数量
-            </div>
-            <div class="card-value highlight">
-              <count-to :start-val="0" :end-val="dealderCount" :duration="3600" class="card-panel-num" /></div>
+        <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16" class="companybox">
+          <img src="../assets/images/topbg.png" alt="" class="topimg">
+          <img src="../assets/images/topbg.png" alt="" class="bottomimg">
+          <div class="companyboxtitle">
+            企业数据
           </div>
-        </el-col>
+          <div class="companyflex">
+            <div class="topbg companycard cardafter">
+              <div class="card-title1">
+                <img src="../assets/images/tab_company.png" alt="" class="icon-img">
+                分公司数量
+              </div>
 
-        <el-col :span="3">
-          <div class="data-card">
-            <div class="card-title">
-              <i class="el-icon-user"></i>
-              销售数量
+              <div class="card-value highlight1">
+                <count-to :start-val="0" :end-val="dealderCount" :duration="3600"
+                          class="card-panel-num companynumber" />
+              </div>
             </div>
-            <div class="card-value highlight">
-              <count-to :start-val="0" :end-val="groupMgrCount" :duration="3600" class="card-panel-num" />
+            <div class="companycard cardafter">
+              <div class="card-title1">
+                <img src="../assets/images/salesperson.png" alt="" class="icon-img">
+                销售数量
+              </div>
+              <div class="card-value highlight1">
+                <count-to :start-val="0" :end-val="groupMgrCount" :duration="3600"
+                          class="card-panel-num companynumber" />
+              </div>
             </div>
-          </div>
-        </el-col>
+            <div class="companycard cardafter">
+              <div class="card-title1">
+                <img src="../assets/images/member.png" alt="" class="icon-img">
+                会员数量
+              </div>
+              <div class="card-value highlight1">
+                <count-to :start-val="0" :end-val="memberCount" :duration="3600" class="card-panel-num companynumber" />
+                <span class="highlight-today-add companyadd">+{{todayIncreaseUserNum}}</span>
+              </div>
 
-        <el-col :span="3">
-          <div class="data-card">
-            <div class="card-title">
-              <i class="el-icon-shopping-cart-full"></i>
-              会员数量
-            </div>
-            <div class="card-value highlight">
-              <count-to :start-val="0" :end-val="memberCount" :duration="3600" class="card-panel-num" />
-              <span class="highlight-today-add">+{{todayIncreaseUserNum}}</span>
             </div>
-            <div class="card-badge">
-            </div>
-          </div>
-        </el-col>
-        <el-col :span="3">
-          <div class="data-card">
-            <div class="card-title">
-              <i class="el-icon-shopping-cart-full"></i>
-              企微数量
-            </div>
-            <div class="card-value highlight">
-              <count-to :start-val="0" :end-val="qwMemberNum" :duration="3600" class="card-panel-num" /></div>
-            <div class="card-badge">
+            <div class="botttombg companycard">
+              <div class="card-title1">
+                <img src="../assets/images/tab_enterprise.png" alt="" class="icon-img">
+                企微数量
+              </div>
+              <div class="card-value highlight1">
+                <count-to :start-val="0" :end-val="qwMemberNum" :duration="3600" class="card-panel-num companynumber" />
+              </div>
             </div>
           </div>
         </el-col>
 
-        <el-col :span="3">
-          <div class="data-card">
-            <div class="card-title">
-              <i class="el-icon-money"></i>
-              可用余额
-            </div>
-            <div class="card-value highlight">
-              <count-to :start-val="0" :end-val="balance" :duration="3600" class="card-panel-num" />
-            </div>
-          </div>
-        </el-col>
 
-        <el-col :span="3">
-          <div class="data-card">
-            <div class="card-title">
-              <span>今日消耗</span>
-            </div>
-            <div class="card-value highlight">
-              <count-to :start-val="0" :end-val="todayComsumption" :duration="3600" class="card-panel-num" />
-            </div>
-            <div class="card-sub">
-              <span>昨日消耗（元）</span>
-              <span class="sub-value">
-                <count-to :start-val="0" :end-val="yesterdayComsumption" :duration="3600" class="card-panel-num" />
-              </span>
-            </div>
-            <el-progress :percentage="percentage" :show-text="false" color="#409EFF"></el-progress>
-            <div class="card-desc">{{remainMessage}}</div>
+        <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="propertyboxtitle">
+          <div class="property_title">
+            资产概览
           </div>
-        </el-col>
-
-        <el-col :span="3">
-          <div class="data-card">
-            <div class="card-title">
-              <span class="cdn-label">CDN</span>
-              今日
-            </div>
-            <div class="card-value highlight">{{formatBytes(this.todayTraffic)}}
+          <div class="propertyboxflex">
+            <div class="property-card propertyline">
+              <div class="property-title">
+                <i class="el-icon-money"></i>
+                企业资产（元）
+              </div>
+              <div class="card-value highlight">
+                <count-to :start-val="0" :end-val="balance" :duration="3600" class="card-panel-num" />
+              </div>
             </div>
-            <div class="card-sub">
-              <span>本月</span>
-              <span class="sub-value">{{formatBytes(this.thisMonthTraffic)}}</span>
+            <div class="property-card">
+              <div class="property-title">
+                <span>今日消耗 (元)</span>
+              </div>
+              <div class="card-value highlight" style="color: rgba(32, 33, 36, 1);margin-top: 10px;">
+                <count-to :start-val="0" :end-val="todayComsumption" :duration="3600" class="card-panel-num" />
+              </div>
+              <div class="card-compare">
+                较昨日 <span>+1</span>
+              </div>
             </div>
           </div>
-        </el-col>
 
-        <el-col :span="3">
-          <div class="data-card">
-            <div class="card-title">
-              <i class="el-icon-message"></i>
-              短信剩余条数
-            </div>
-            <div class="card-value highlight">
-              <count-to :start-val="0" :end-val="smsRemainCount" :duration="3600" class="card-panel-num" />
-            </div>
-          </div>
         </el-col>
+      </el-row>
 
-        <el-col :span="3">
-          <div class="data-card">
-            <div class="card-title">
-              平台今日看课人数
-            </div>
-            <div class="card-value highlight">
-              <count-to :start-val="0" :end-val="todayWatchUserCount" :duration="3600" class="card-panel-num" />
-            </div>
-            <div class="card-sub">
-              <span>配额上限</span>
-              <span class="sub-value">
-                <count-to :start-val="0" :end-val="todayWatchUserCount" :duration="3600" class="card-panel-num" />/<count-to :start-val="0" :end-val="versionLimit" :duration="3600" class="card-panel-num" /></span>
-            </div>
-            <el-progress :percentage="todayWatchUserCount/versionLimit" :show-text="false" color="#409EFF"></el-progress>
+      <le-row :gutter="20">
+        <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
+          <div class="operatetitle">
+            经营数据
           </div>
-        </el-col>
-        <el-col :span="3">
-          <div class="data-card">
-            <div class="card-title">
-              <i class="el-icon-shopping-cart-full"></i>
-              订单总数
-            </div>
-            <div class="card-value highlight">
-              <count-to :start-val="0" :end-val="orderTotalNum" :duration="3600" class="card-panel-num" />
-              <span class="highlight-today-add">+{{todayOrderNum}}</span>
-            </div>
-            <div class="card-badge">
+          <div class="operatetitle-col">
+            <div class="operatetitle-card">
+              <div class="card-title">
+                <i class="el-icon-shopping-cart-full"></i>
+                收款总数
+              </div>
+              <div class="operate-value highlight">
+                <count-to :start-val="0" :end-val="recvTotalNum" :duration="3600" class="card-panel-num" />
+                <div class="yesterdaybox">
+                  较昨日 <span class="highlight-today-add2">+{{recvTodayNum}}</span>
+                </div>
+              </div>
+              <div class="card-badge">
+              </div>
             </div>
-          </div>
-        </el-col>
-        <el-col :span="3">
-          <div class="data-card">
-            <div class="card-title">
-              <i class="el-icon-shopping-cart-full"></i>
-              收款总数
+            <div class="operatetitle-card">
+              <div class="card-title">
+                <i class="el-icon-shopping-cart-full"></i>
+                订单总数
+              </div>
+              <div class="operate-value highlight">
+                <count-to :start-val="0" :end-val="orderTotalNum" :duration="3600" class="card-panel-num" />
+                <div class="yesterdaybox">
+                  较昨日 <span class="highlight-today-add2">+{{todayOrderNum}}</span>
+                </div>
+
+              </div>
+              <div class="card-badge">
+              </div>
+
             </div>
-            <div class="card-value highlight">
-              <count-to :start-val="0" :end-val="recvTotalNum" :duration="3600" class="card-panel-num" />
-              <span class="highlight-today-add">+{{recvTodayNum}}</span>
+            <div class="operatetitle-card">
+              <div class="card-title">
+                平台今日看课人数
+              </div>
+              <div class="operate-value highlight">
+                <count-to :start-val="0" :end-val="todayWatchUserCount" :duration="3600" class="card-panel-num" />
+              </div>
+              <div class="card-sub">
+                <span>配额上限</span>
+                <span class="sub-value">
+                  <count-to :start-val="0" :end-val="todayWatchUserCount" :duration="3600" class="card-panel-num"
+                            style="color: rgba(49, 185, 154, 1);" />
+                  /
+                  <count-to :start-val="0" :end-val="versionLimit" :duration="3600" class="card-panel-num" />
+                </span>
+              </div>
+              <el-progress :percentage="todayWatchUserCount/versionLimit" :show-text="false"
+                           color="#409EFF"></el-progress>
             </div>
-            <div class="card-badge">
+            <div class="operatetitle-card">
+              <div class="card-title">
+                <i class="el-icon-shopping-cart-full"></i>
+                商品总数
+              </div>
+              <div class="operate-value highlight">
+                <count-to :start-val="0" :end-val="goodsTotalNum" :duration="3600" class="card-panel-num" />
+                <div class="yesterdaybox">
+                  较昨日 <span class="highlight-today-add2">+{{todayGoodsNum}}</span>
+                </div>
+
+              </div>
+              <div class="card-badge">
+              </div>
             </div>
           </div>
+
         </el-col>
-        <el-col :span="3">
-          <div class="data-card">
-            <div class="card-title">
-              <i class="el-icon-shopping-cart-full"></i>
-              商品总数
-            </div>
-            <div class="card-value highlight">
-              <count-to :start-val="0" :end-val="goodsTotalNum" :duration="3600" class="card-panel-num" />
-              <span class="highlight-today-add">+{{todayGoodsNum}}</span>
+
+
+        <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" style="padding-left: 15px;">
+
+          <div class="internetbox">
+            <div class="internet-cardtop">
+              <div class="cardinnerbox">
+                <div class="cardtopimg">
+                  <img src="../assets/images/liuliang.png" alt=""><span>剩余流量</span>
+                </div>
+                <div class="cardtopnumber">
+                  100.00GB
+                </div>
+              </div>
+              <div class="progress">
+                <el-progress :percentage="90" :show-text="false" define-back-color="#000">
+
+                </el-progress>
+              </div>
+              <div class="cardinnerbox2">
+                <div>
+                  今日消耗 <span>{{formatBytes(this.todayTraffic)}}</span>
+                </div>
+                <div>
+                  本月 <span>{{formatBytes(this.thisMonthTraffic)}}</span>
+                </div>
+              </div>
             </div>
-            <div class="card-badge">
+
+            <div class="internetbox-messge">
+              <div class="internet-card">
+                <img src="../assets/images/message.png" alt="">
+
+                <span class="internet-title">
+                  短信剩余条数 (条)
+                </span>
+              </div>
+              <div class="internet-number">
+                0
+              </div>
             </div>
           </div>
         </el-col>
-      </el-row>
+      </le-row>
     </el-card>
     <!-- 分析概览 (Analysis Overview) -->
     <div class="analysis-section" shadow="never">
       <div slot="header" class="header">
-        <span>分析概览</span>
+        <div>分析概览</div>
         <div class="tab-group">
           <el-radio-group v-model="queryTime" size="medium" @change="handleAnalysis">
             <el-radio-button label="今日"></el-radio-button>
@@ -191,7 +219,6 @@
 
         <div class="action-group">
           <el-radio-group v-model="userTypeText" @change="handleUserType">
-<!--            <el-radio-button label="会员"></el-radio-button>-->
             <el-radio-button label="企微"></el-radio-button>
           </el-radio-group>
 
@@ -203,21 +230,23 @@
             <el-dropdown-menu slot="dropdown">
               <el-dropdown-item :command="0" :class="{ 'is-active': !autoRefreshInterval }">关闭</el-dropdown-item>
               <el-dropdown-item :command="5" :class="{ 'is-active': autoRefreshInterval === 5 }">5分钟</el-dropdown-item>
-              <el-dropdown-item :command="10" :class="{ 'is-active': autoRefreshInterval === 10 }">10分钟</el-dropdown-item>
-              <el-dropdown-item :command="15" :class="{ 'is-active': autoRefreshInterval === 15 }">15分钟</el-dropdown-item>
+              <el-dropdown-item :command="10"
+                                :class="{ 'is-active': autoRefreshInterval === 10 }">10分钟</el-dropdown-item>
+              <el-dropdown-item :command="15"
+                                :class="{ 'is-active': autoRefreshInterval === 15 }">15分钟</el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>
           <el-button size="small" plain icon="el-icon-refresh" type="primary" @click="manualRefresh">手动刷新</el-button>
-          <!--          <el-button size="small" type="primary" @click="refresh">刷新</el-button>-->
         </div>
       </div>
     </div>
     <div>
       <el-row :gutter="20">
-        <el-col :span="12" style="position: relative">
-          <div class="analysis-card-check" :class="selectedDiv===0?'analysis-card-check-selected color':''" @click="handleToggleDiv(0)">
+        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" style="position: relative">
+          <div class="analysis-card-check" :class="selectedDiv===0?'analysis-card-check-selected color':''"
+               @click="handleToggleDiv(0)">
             <div class="analysis-card">
-              <div class="card-icon"><i class="el-icon-monitor"></i></div>
+              <img class="card-icon" src="../assets/images/cishu_views.png"></img>
               <div class="card-content">
                 <div class="card-row">
                   <span>观看人数</span>
@@ -238,68 +267,70 @@
               </div>
             </div>
             <div class="analysis-card">
-              <div class="card-icon"><i class="el-icon-video-play"></i></div>
+              <img class="card-icon" src="../assets/images/number_views.png"></img>
               <div class="card-content">
                 <div class="card-row">
                   <span>观看次数</span>
-                  <span class="highlight">
+                  <span class="highlight-red">
                     <count-to :start-val="0" :end-val="watchCount" :duration="3600" class="card-panel-num" /></span>
                 </div>
                 <div class="card-row">
                   <span>完播次数</span>
-                  <span class="highlight">
+                  <span class="highlight-red">
                     <count-to :start-val="0" :end-val="completedCount" :duration="3600" class="card-panel-num" />
                   </span>
                 </div>
                 <div class="card-row">
                   <span>视频完播率</span>
-                  <span class="highlight">{{watchRate}}%</span>
+                  <span class="highlight-red">{{watchRate}}%</span>
                 </div>
               </div>
             </div>
           </div>
         </el-col>
 
-        <el-col :span="6" style="position: relative">
-          <div class="analysis-card-check" :class="selectedDiv===1?'analysis-card-check-selected color':''"  @click="handleToggleDiv(1)">
+        <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6" style="position: relative">
+          <div class="analysis-card-check" :class="selectedDiv===1?'analysis-card-check-selected color':''"
+               @click="handleToggleDiv(1)">
             <div class="analysis-card">
-              <div class="card-icon"><i class="el-icon-headset"></i></div>
+              <img class="card-icon" src="../assets/images/renshu_views.png"></img>
               <div class="card-content">
                 <div class="card-row">
                   <span>答题人数</span>
-                  <span class="highlight">
+                  <span class="highlight-black">
                     <count-to :start-val="0" :end-val="answerMemberCount" :duration="3600" class="card-panel-num" />
                   </span>
                 </div>
                 <div class="card-row">
                   <span>正确人数</span>
-                  <span class="highlight">
+                  <span class="highlight-black">
                     <count-to :start-val="0" :end-val="correctUserCount" :duration="3600" class="card-panel-num" />
-                    </span>
+                  </span>
                 </div>
                 <div class="card-row">
                   <span>正确率</span>
-                  <span class="highlight">{{correctRate}}%</span>
+                  <span class="highlight-black">{{correctRate}}%</span>
                 </div>
               </div>
             </div>
           </div>
         </el-col>
 
-        <el-col :span="6" style="position: relative">
-          <div class="analysis-card-check" :class="selectedDiv===2?'analysis-card-check-selected color':''"  @click="handleToggleDiv(2)">
+        <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6"  style="position: relative">
+          <div class="analysis-card-check" :class="selectedDiv===2?'analysis-card-check-selected color':''"
+               @click="handleToggleDiv(2)">
             <div class="analysis-card">
-              <div class="card-icon"><i class="el-icon-present"></i></div>
+              <img class="card-icon" src="../assets/images/hongbao_views.png"></img>
               <div class="card-content">
                 <div class="card-row">
                   <span>答题红包个数</span>
-                  <span class="highlight">
+                  <span class="highlight-black">
                     <count-to :start-val="0" :end-val="rewardCount" :duration="3600" class="card-panel-num" />
-                    </span>
+                  </span>
                 </div>
                 <div class="card-row">
                   <span>答题红包金额(元)</span>
-                  <span class="highlight">
+                  <span class="highlight-black">
                     <count-to :start-val="0" :end-val="rewardMoney" :duration="3600" class="card-panel-num" /></span>
                 </div>
               </div>
@@ -1129,7 +1160,7 @@ export default {
 
       return (isNegative ? '-' : '') + formattedInteger + decimalPart;
     },
-    handleToggleDiv(selected){
+    handleToggleDiv(selected) {
       this.selectedDiv = selected;
 
       if (selected === 1) {
@@ -1151,12 +1182,12 @@ export default {
           if (this.answerRedPackMoneyViewerChart) this.answerRedPackMoneyViewerChart.resize();
         });
       }
-      if(this.selectedDiv === 0){
+      if (this.selectedDiv === 0) {
         this.handleViewChartData()
         this.handleDealerChartData()
-      } else if(this.selectedDiv === 1) {
+      } else if (this.selectedDiv === 1) {
         this.handleCourseWatchChart()
-      } else if(this.selectedDiv === 2) {
+      } else if (this.selectedDiv === 2) {
         this.handleAnswerRedPackViewerChart()
         this.handleAnswerRedPackMoneyViewerChart()
       }
@@ -1207,11 +1238,11 @@ export default {
       return param;
     },
     // 分析概览
-    handleAnalysis(e){
+    handleAnalysis(e) {
 
       let param = this.getParam();
-      analysisPreview(param).then(res=>{
-        if(res.code === 200){
+      analysisPreview(param).then(res => {
+        if (res.code === 200) {
           this.watchUserCount = res.data.watchUserCount;
           this.completedUserCount = res.data.completedUserCount;
           this.completedRate = res.data.completedRate;
@@ -1226,12 +1257,12 @@ export default {
         }
       })
 
-      if(this.selectedDiv === 0){
+      if (this.selectedDiv === 0) {
         this.handleViewChartData()
         this.handleDealerChartData()
-      } else if(this.selectedDiv === 1) {
+      } else if (this.selectedDiv === 1) {
         this.handleCourseWatchChart()
-      } else if(this.selectedDiv === 2) {
+      } else if (this.selectedDiv === 2) {
         this.handleAnswerRedPackViewerChart()
         this.handleAnswerRedPackMoneyViewerChart()
       }
@@ -1401,37 +1432,60 @@ export default {
 </script>
 
 <style scoped>
-.highlight-today-add{
-  color:green;font-size:17px;font-weight: normal;
+.highlight-today-add {
+  color: green;
+  font-size: 17px;
+  font-weight: normal;
+}
+
+.highlight-today-add2 {
+  color: rgba(49, 185, 154, 1);
+  font-size: 14px;
+  font-weight: normal;
+  transform: scale(.9);
 }
-.action-group .el-button + .el-button,
+
+.action-group .el-button+.el-button,
 .action-group .el-dropdown {
   margin-left: 10px;
 }
+
 .is-active {
   color: #409EFF;
   font-weight: bold;
 }
+
 ::v-deep .el-radio-button__inner:hover {
-  color: #409EFF; /* 鼠标悬浮时的文字颜色，可以根据需要调整 */
+  color: #409EFF;
+  /* 鼠标悬浮时的文字颜色，可以根据需要调整 */
 }
+
 ::v-deep .el-radio-button.is-active .el-radio-button__inner {
-  background-color: #409EFF; /* 选中时的背景色 */
-  border-color: #409EFF;     /* 选中时的边框色 */
-  color: #FFFFFF;           /* 选中时的文字颜色 (通常是白色) */
-  box-shadow: -1px 0 0 0 #409EFF; /* 处理按钮间的连接缝隙 */
+  background-color: #409EFF;
+  /* 选中时的背景色 */
+  border-color: #409EFF;
+  /* 选中时的边框色 */
+  color: #FFFFFF;
+  /* 选中时的文字颜色 (通常是白色) */
+  box-shadow: -1px 0 0 0 #409EFF;
+  /* 处理按钮间的连接缝隙 */
 }
+
 /* 如果需要，也可以修改非选中状态下的聚焦（focus）或悬浮（hover）样式 */
 /* 例如，让非选中按钮悬浮时边框和文字也变蓝 */
 ::v-deep .el-radio-button:not(.is-active) .el-radio-button__inner:hover {
   color: #409EFF;
   /* border-color: #b3d8ff;  Element UI 默认悬浮边框色，可以按需修改 */
 }
+
 /* 聚焦时的外框，如果需要的话 */
 ::v-deep .el-radio-button:focus:not(.is-checked) .el-radio-button__inner {
-  /* border-color: #409EFF; */ /* Element UI 默认的 focus 颜色通常关联主题色 */
-  /* box-shadow: 0 0 2px 2px rgba(64, 158, 255, 0.2); */ /* 示例 focus 光晕 */
+  /* border-color: #409EFF; */
+  /* Element UI 默认的 focus 颜色通常关联主题色 */
+  /* box-shadow: 0 0 2px 2px rgba(64, 158, 255, 0.2); */
+  /* 示例 focus 光晕 */
 }
+
 .statistics-dashboard {
   padding: 20px;
   background-color: #f5f7fa;
@@ -1461,7 +1515,8 @@ export default {
   position: relative;
   transition: background-color 0.3s ease-in-out;
 }
-.data-card:hover{
+
+.data-card:hover {
   border: 1px solid #4592ff;
   background-color: #e7f1ff;
 }
@@ -1472,10 +1527,16 @@ export default {
   margin-bottom: 10px;
 }
 
+.card-title1 {
+  color: white;
+  font-size: 14px;
+  margin-bottom: 10px;
+}
+
 .card-value {
   font-size: 24px;
   font-weight: bold;
-  margin-top: auto;
+  margin-top: 20px;
 }
 
 .highlight {
@@ -1555,7 +1616,8 @@ export default {
   justify-items: center;
   flex-direction: column;
   padding: 10px;
-  .highlight{
+
+  .highlight {
     text-align: center;
     margin-top: 1em;
 
@@ -1563,9 +1625,10 @@ export default {
     color: #1677ff;
     font-size: 21px;
     line-height: 42px;
-    font-weight: 400;
+    font-weight: 600;
     margin-top: 8px;
   }
+
   font-size: 15px;
   color: #000;
 
@@ -1615,17 +1678,20 @@ export default {
   height: 350px;
   width: 100%;
 }
-.analysis-card-check{
+
+.analysis-card-check {
   display: flex;
   flex-direction: row;
   border: 1px solid transparent;
   background-color: #fff;
   border-radius: 4px;
 }
-.analysis-card-check:hover{
+
+.analysis-card-check:hover {
   cursor: pointer;
 }
-.analysis-card-check-selected:after{
+
+.analysis-card-check-selected:after {
   content: "";
   display: block;
   border-width: 15px;
@@ -1637,9 +1703,10 @@ export default {
   border-color: #4592FF transparent transparent transparent;
   font-size: 0;
   line-height: 0;
-  z-index:1;
+  z-index: 1;
 }
-.analysis-card-check-selected:before{
+
+.analysis-card-check-selected:before {
   content: "";
   display: block;
   border-width: 15px;
@@ -1651,22 +1718,323 @@ export default {
   border-color: #4592FF transparent transparent transparent;
   font-size: 0;
   line-height: 0;
-  z-index:1;
+  z-index: 1;
 }
-.analysis-card-check-selected{
+
+.analysis-card-check-selected {
   border: 1px solid #4592FF;
   background-color: #e7f1ff;
 }
-.color{
+
+.color {
   position: relative;
   border: 1px solid #4592FF;
   background-color: #e7f1ff;
 }
+
 .color:after {
   bottom: -27px;
   border-color: #E7F1FF transparent transparent transparent;
 }
-.legend-group{
 
+.companybox {
+  color: white;
+  background-color: #006CFF;
+  padding: 10px 10px 40px 10px;
+  box-sizing: border-box;
+  position: relative;
+  border-radius: 6px;
+
+  .topimg {
+    width: 100px;
+    height: 80px;
+    position: absolute;
+    top: 0px;
+    left: 0;
+  }
+
+  .bottomimg {
+    width: 100px;
+    height: 80px;
+    position: absolute;
+    bottom: -10px;
+    right: 0;
+    transform: rotate(180deg);
+  }
+
+  .companyboxtitle {
+    height: 30px;
+    margin-bottom: 20px;
+    font-weight: 600;
+  }
+
+  .companyflex {
+    display: flex;
+    justify-content: space-around;
+  }
+}
+
+
+
+.companynumber {
+  color: white;
+}
+
+.companycard {
+
+  width: 25%;
+}
+
+.companyadd {
+  color: white;
+}
+
+.cardafter {
+  position: relative;
+
+}
+
+.cardafter::after {
+  content: "";
+  height: 60px;
+  border-right: 1px solid rgba(255, 255, 255, 0.20);
+  position: absolute;
+  right: 30px;
+  top: 0px;
+}
+
+.highlight1 {
+  margin-top: 10px;
+  margin-left: 20px;
+}
+
+
+
+
+.propertyboxtitle {
+  background-image: url(../assets/images/zcgl_bg.png);
+  height: 100px;
+}
+
+.propertyboxflex {
+  display: flex;
+  background-color: white;
+  justify-content: space-between;
+}
+
+.property-card {
+  width: 48%;
+  border-radius: 4px;
+  padding: 15px;
+  height: 100px;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  transition: background-color 0.3s ease-in-out;
+
+}
+
+.property_title {
+  height: 40px;
+  line-height: 40px;
+  color: rgba(32, 33, 36, 1);
+  box-sizing: border-box;
+  padding-left: 10px;
+  font-weight: 600;
+}
+
+.card-compare {
+  margin-top: 5px;
+  font-size: 14px;
+  color: rgba(92, 95, 102, 1);
+
+  span {
+    font-size: 13px;
+    transform: scale(.8);
+    color: rgba(49, 185, 154, 1);
+  }
+}
+
+.propertyline {
+  position: relative;
+}
+
+.propertyline::after {
+  position: absolute;
+  content: "";
+  height: 80px;
+  border-right: 1px solid rgba(237, 239, 242, 1);
+  right: 0;
+}
+
+.operatetitle {
+  font-weight: 600;
+  height: 50px;
+  line-height: 50px;
+}
+
+.operatetitle-col{
+  display: flex;
+  justify-content: space-between;
+  padding-bottom: 20px;
+  padding-right: 5px;
+  .operatetitle-card {
+    width: 24%;
+    background-color: rgba(245, 247, 250, 1);
+    border-radius: 4px;
+    padding: 15px;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    transition: background-color 0.3s ease-in-out;
+
+    .operate-value {
+      font-size: 24px;
+      font-weight: bold;
+    }
+  }
+}
+
+.yesterdaybox {
+  font-size: 14px;
+  color: rgba(92, 95, 102, 1);
+  font-weight: 200;
+  margin-top: 10px;
+}
+
+.internetbox {
+  background: linear-gradient(to right, rgba(255, 99, 0, 1), rgba(255, 159, 1, 1));
+  border-radius: 6px;
+  padding: 2px 5px 15px 5px;
+  width: 100%;
+  .internet-cardtop {
+    background-color: white;
+    border-radius: 3px;
+    margin-top: 5px;
+    justify-content: space-between;
+    padding: 15px;
+    box-sizing: border-box;
+    color: rgba(32, 33, 36, 1);
+
+    .cardinnerbox {
+      display: flex;
+      justify-content: space-between;
+
+      .cardtopimg {
+        display: flex;
+        align-items: center;
+        font-size: 15px;
+
+        img {
+          height: 18px;
+          width: 18px;
+        }
+      }
+
+      .cardtopnumber {
+        font-size: 25px;
+        color: rgba(32, 33, 36, 1);
+        font-weight: bold;
+      }
+
+    }
+
+    .cardinnerbox2 {
+      display: flex;
+      justify-content: space-between;
+      font-size: 14px;
+      color: rgba(92, 95, 102, 1);
+
+
+    }
+
+  }
+
+  .internetbox-messge{
+    color: white;
+    display: flex;
+    justify-content: space-between;
+    padding: 15px 10px 10px 10px;
+    .internet-card{
+      display: flex;
+      font-size: 14px;
+      align-items: center;
+      img{
+        height: 18px;
+        width: 18px;
+      }
+      span{
+        padding-left: 5px;
+      }
+    }
+    .internet-number{
+      font-size: 25px;
+
+    }
+  }
+  .internetbox {
+    display: flex;
+    color: white;
+
+    .internet-card {
+      width: 100%;
+      display: flex;
+      color: white;
+
+    }
+  }
+
+  .internet-title {
+    font-size: 14px;
+  }
+
+}
+
+.company {
+  background-color: 006CFF;
+}
+.highlight-red{
+  text-align: center;
+  margin-top: 1em;
+  font-family: BebasNeue;
+  color: rgba(255, 82, 82, 1);
+  font-size: 21px;
+  line-height: 42px;
+  font-weight: 600;
+  margin-top: 8px;
+}
+.highlight-black{
+  text-align: center;
+  margin-top: 1em;
+  font-family: BebasNeue;
+  color: rgba(32, 33, 36, 1);
+  font-size: 21px;
+  line-height: 42px;
+  font-weight: 600;
+  margin-top: 8px;
+
+}
+.operatetitle-card:hover{
+  border: 1px solid #4592ff;
+  background-color: #e7f1ff;
+}
+.icon-img{
+  height: 14px;
+  width: 14px;
+}
+.progress{
+  transform: rotate(180deg);
+  margin-top: 20px;
+}
+.progress ::v-deep .el-progress-bar__outer{
+  background-color: rgba(247, 152, 11, 0.2);
+}
+::v-deep .el-progress {
+
+  .el-progress-bar {
+    .el-progress-bar__inner {
+      background: linear-gradient(to right, #FF6300,#FF9F01)
+    }
+  }
 }
 </style>