scrm首页更新ui

src/store/modules/settings.js

@@ -1,17 +1,19 @@
-import variables from '@/assets/styles/element-variables.scss'
 import defaultSettings from '@/settings'
 
-const { showSettings, tagsView,topNav, fixedHeader, sidebarLogo } = defaultSettings
+const { sideTheme, showSettings, topNav, tagsView, fixedHeader, sidebarLogo, dynamicTitle } = defaultSettings
 
+const storageSetting = JSON.parse(localStorage.getItem('layout-setting')) || ''
 const state = {
-  theme: variables.theme,
+  title: '',
+  theme: storageSetting.theme || '#006CFF',
+  sideTheme: storageSetting.sideTheme || sideTheme,
   showSettings: showSettings,
-  tagsView: tagsView,
-  topNav: topNav,
-  fixedHeader: fixedHeader,
-  sidebarLogo: sidebarLogo
+  topNav:  storageSetting.topNav === undefined ? topNav : storageSetting.topNav,
+  tagsView: storageSetting.tagsView === undefined ? tagsView : storageSetting.tagsView,
+  fixedHeader: storageSetting.fixedHeader === undefined ? fixedHeader : storageSetting.fixedHeader,
+  sidebarLogo: storageSetting.sidebarLogo === undefined ? sidebarLogo : storageSetting.sidebarLogo,
+  dynamicTitle: storageSetting.dynamicTitle === undefined ? dynamicTitle : storageSetting.dynamicTitle
 }
-
 const mutations = {
   CHANGE_SETTING: (state, { key, value }) => {
     if (state.hasOwnProperty(key)) {
@@ -21,8 +23,13 @@ const mutations = {
 }
 
 const actions = {
+  // 修改布局设置
   changeSetting({ commit }, data) {
     commit('CHANGE_SETTING', data)
+  },
+  // 设置网页标题
+  setTitle({ commit }, title) {
+    state.title = title
   }
 }
 

src/views/index.vue

@@ -2,174 +2,202 @@
   <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="memberCount" :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">
-              {{balance}}
-            </div>
-          </div>
-        </el-col>
 
-        <el-col :span="3">
-          <div class="data-card">
-            <div class="card-title">
-              <span>今日消耗</span>
-            </div>
-            <div class="card-value highlight">
-              {{todayComsumption?todayComsumption.toFixed(2):'0.00'}}
-            </div>
-            <div class="card-sub">
-              <span>昨日消耗（元）</span>
-              <span class="sub-value">
-                {{yesterdayComsumption?yesterdayComsumption.toFixed(2):'0.00'}}
-              </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>
+      <el-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>
@@ -1401,37 +1429,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 +1512,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 +1524,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,17 +1613,19 @@ export default {
   justify-items: center;
   flex-direction: column;
   padding: 10px;
-  .highlight{
+
+  .highlight {
     text-align: center;
     margin-top: 1em;
 
     font-family: BebasNeue;
     color: #1677ff;
-    font-size: 26px;
+    font-size: 21px;
     line-height: 42px;
-    font-weight: 400;
+    font-weight: 600;
     margin-top: 8px;
   }
+
   font-size: 15px;
   color: #000;
 
@@ -1615,17 +1675,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 +1700,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 +1715,324 @@ 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%;
+    border: 1px solid transparent;
+    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>