From 159b1a6a4efb990808a538bfdfb5ffa0dba05a85 Mon Sep 17 00:00:00 2001
From: wangyilin <1454641981@qq.com>
Date: Tue, 13 May 2025 15:27:05 +0800
Subject: [PATCH] =?UTF-8?q?=E7=94=A8=E6=88=B7=E7=AE=A1=E7=90=86=E7=BC=96?=
 =?UTF-8?q?=E5=86=99=E6=98=BE=E7=A4=BA=E4=B8=8E=E9=9A=90=E8=97=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/index.vue             | 447 +++++++++++++++++++++++++-------
 src/views/system/user/index.vue |  77 +++++-
 2 files changed, 419 insertions(+), 105 deletions(-)

diff --git a/src/views/index.vue b/src/views/index.vue
index f6e6f35..da9629c 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="home" >
+  <div class="home">
     <div style="width: 72%">
       <div class="homeItem">
-        <blockquote  class="homeItemIndex">
+        <blockquote class="homeItemIndex">
           系统公告
           <span class="homeSpan">2024-11-25</span>
         </blockquote>
@@ -10,11 +10,11 @@
         <span>为了更方便功能查找使用，从新编排了菜单位置，基础信息相关的页面都在顶部”基础信息“下</span>
       </div>
       <div class="home2Item">
-        <blockquote class="homeItem2Index">
+        <blockquote class="public">
           <div class="header-wrapper">
             <span>供应商</span>
             <div class="fold-button" @click="toggleFold">
-              <span>{{ isFold ? '展开' : '收起' }}</span>
+              <span>{{ isFold ? "展开" : "收起" }}</span>
               <Icon name="LineMdPerson" :style="{ transform: isFold ? 'rotate(90deg)' : 'rotate(265deg)' }"></Icon>
             </div>
           </div>
@@ -26,24 +26,26 @@
             <div class="fold-content_item">
               <div class="fold-content_item_index" v-for="(item,index) in foldContentItemIndex" :key="index">
                 <div class="fold-content_item_index_top">
-                  <div class="content">{{item.titleName}}</div>
-                  <span>{{item.video}}</span>
+                  <div class="content">{{ item.titleName }}</div>
+                  <span>{{ item.video }}</span>
                 </div>
                 <div class="intermediate" v-for="items in item.intermediate" :key="items.key">
-                  <span style="width: 50px">{{items.name}}</span>
-                  <span style="width: 50px">{{items.digital}}</span>
-                  <span style="width: 50px">{{items.mechanism}}</span>
-                  <span style="width: 50px">{{items.digitalKey}}</span>
+                  <span style="width: 50px">{{ items.name }}</span>
+                  <span style="width: 50px">{{ items.digital }}</span>
+                  <span style="width: 50px">{{ items.mechanism }}</span>
+                  <span style="width: 50px">{{ items.digitalKey }}</span>
                 </div>
-                <hr/>
+                <hr />
                 <div style="display: flex;align-items: center;justify-content: space-between">
                   <div style="display: flex;">
-                    <div class="risk">{{item.risk}}</div>
-                    <div style="font-weight: bold;color: #009688 !important;margin-left: 10px;line-height: 18px">{{item.score}}分</div>
+                    <div class="risk">{{ item.risk }}</div>
+                    <div style="font-weight: bold;color: #009688 !important;margin-left: 10px;line-height: 18px">
+                      {{ item.score }}分
+                    </div>
                   </div>
                   <div style="display: flex">
-                    <div>{{item.ranking}}</div>
-                    <div style="margin-left: 10px">{{item.num}}</div>
+                    <div>{{ item.ranking }}</div>
+                    <div style="margin-left: 10px">{{ item.num }}</div>
                   </div>
                 </div>
               </div>
@@ -52,106 +54,257 @@
           </div>
         </div>
       </div>
+      <div class="home4Item">
+        <div class="home4ItemIndex">
+          <div class="home4ItemIndexItem">
+            <blockquote class="public">
+              <div class="header-wrapper">
+                <span>用户数据</span>
+              </div>
+            </blockquote>
+            <div>
+              <div style="display: flex;justify-content: space-between;padding: 12px 15px;line-height: 20px">
+                <div style="background-color: #F7F7F7;color: #666">总数</div>
+                <div style="font-size: 20px">15452</div>
+              </div>
+              <div style="display: flex;justify-content: space-between;padding: 12px  15px;line-height: 20px">
+                <div style="background-color: #F7F7F7;color: #666"> 日活跃量</div>
+                <div style="font-size: 20px">6666</div>
+              </div>
+              <div style="display: flex;justify-content: space-between;padding: 12px  15px;line-height: 20px">
+                <div style="background-color: #F7F7F7;color: #666">用户</div>
+                <div style="font-size: 20px">524</div>
+              </div>
+            </div>
+          </div>
+          <div class="home4ItemIndexItem">
+            <blockquote class="public">
+              <div class="header-wrapper">
+                <span>每日消息</span>
+              </div>
+            </blockquote>
+            <div>
+              <div style="display: flex;justify-content: space-between;padding: 12px 15px;line-height: 20px">
+                <div style="background-color: #F7F7F7;color: #666">今日发送</div>
+                <div style="font-size: 20px">0</div>
+              </div>
+              <div style="display: flex;justify-content: space-between;padding: 12px  15px;line-height: 20px">
+                <div style="background-color: #F7F7F7;color: #666"> 接受率</div>
+                <div style="font-size: 20px">20%</div>
+              </div>
+              <div style="display: flex;justify-content: space-between;padding: 12px  15px;line-height: 20px">
+                <div style="background-color: #F7F7F7;color: #666">查看率</div>
+                <div style="font-size: 20px;color: #FFB800 !important">30%</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="home4Item2Index">
+          <blockquote class="public">
+            <div class="header-wrapper">
+              <span>客户点评</span>
+            </div>
+          </blockquote>
+          <div style="display: flex;justify-content: space-between">
+            <div class="home4Item2IndexITem">
+              <span style="margin-left: 20px;background-color: #F7F7F7; color: #666">好评率</span>
+              <div style="display: flex">
+                <div style="width: 33%;text-align: center;margin-top: 19px">
+                  <span>口味</span>
+                  <div style="color: #FFB800;font-size: 18px">54.64%</div>
+                </div>
+                <div style="width: 33%;text-align: center;margin-top: 19px">
+                  <span>卫生</span>
+                  <div style="color: #FFB800;font-size: 18px">54.64%</div>
+                </div>
+                <div style="width: 33%;text-align: center;margin-top: 19px">
+                  <span>态度</span>
+                  <div style="color: #FFB800;font-size: 18px">67.92%</div>
+                </div>
+              </div>
+            </div>
+            <div class="home4Item2IndexITem">
+              <span style="margin-left: 20px;background-color: #F7F7F7; color: #666">综合TOP3</span>
+              <div>
+                <div
+                  style="display: flex;align-items: center;justify-content: space-around;line-height: 10px;padding: 5px 0">
+                  <div><img style="width: 20px;height: 20px"
+                            src="https://wx.wy2020.com/assets/common/images/medal/gold_medal.png"></div>
+                  <div>技术部</div>
+                  <div>68.91%</div>
+                </div>
+                <div
+                  style="display: flex;align-items: center;justify-content: space-around;line-height: 10px;padding:  5px 0">
+                  <div><img style="width: 20px;height: 20px"
+                            src="https://wx.wy2020.com/assets/common/images/medal/silver_medal.png"></div>
+                  <div>技术部</div>
+                  <div>68.91%</div>
+                </div>
+                <div
+                  style="display: flex;align-items: center;justify-content: space-around;line-height: 10px;padding:  5px 0">
+                  <div><img style="width: 20px;height: 20px"
+                            src="https://wx.wy2020.com/assets/common/images/medal/bronze_medal.png"></div>
+                  <div>技术部</div>
+                  <div>68.91%</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
     <div style="width: 25%">
-       <div class="home3Item">1231321</div>
+      <div class="home3Item">
+        <blockquote class="public" style="margin-left: 0">
+          <div class="header-wrapper">
+            <span>快捷入口</span>
+          </div>
+        </blockquote>
+        <div class="home3ItemIndex">
+          <div class="home3ItemIndexEachItem">
+            <div>基础信息管理</div>
+            <i style="font-size: 20px"> > </i>
+          </div>
+          <div class="home3ItemIndexEachItem">
+            <div>设备台账</div>
+            <i style="font-size: 20px"> > </i>
+          </div>
+          <div class="home3ItemIndexEachItem">
+            <div>设备状态</div>
+            <i style="font-size: 20px"> > </i>
+          </div>
+          <div class="home3ItemIndexEachItem">
+            <div>营养食安</div>
+            <i style="font-size: 20px"> > </i>
+          </div>
+          <div class="home3ItemIndexEachItem">
+            <div>数据分析 </div>
+            <i style="font-size: 20px"> > </i>
+          </div>
+        </div>
+      </div>
+
+
+      <div class="home5Item">
+        <blockquote class="public" style="margin-left: 0">
+          <div class="header-wrapper">
+            <span>系统事项</span>
+          </div>
+        </blockquote>
+        <div class="home5ItemIndex">
+          <div class="home5ItemIndexEachItem">
+            <div>未处理</div>
+            <i style="font-size: 20px;color:red"> 458 </i>
+          </div>
+          <div class="home5ItemIndexEachItem">
+            <div>已处理</div>
+            <i style="font-size: 20px"> 12 </i>
+          </div>
+        </div>
+      </div>
+
     </div>
   </div>
 </template>
 <script setup lang="ts">
-  import {ref} from "vue";
-  const isFold  = ref(true)
-  const toggleFold = ()=>{
-    isFold.value = !isFold.value
-  }
+  import { ref } from "vue";
+
+  const isFold = ref(true);
+  const toggleFold = () => {
+    isFold.value = !isFold.value;
+  };
   const foldContentItemIndex = ref([
     {
-      titleName:'某某小学',
-      video:'屏幕',
-      intermediate:[
-        {key:1,name:'环境监测',digital:'0 / 0', mechanism:'留样柜',digitalKey:'1 / 1'},
-        {key:2,name:'晨检机',digital:'1 / 1',mechanism:'点评机',digitalKey:'0 / 0'},
-        {key:3,name:'资质',digital:'19',mechanism:'健康证',digitalKey:'94'}
+      titleName: "某某小学",
+      video: "屏幕",
+      intermediate: [
+        { key: 1, name: "环境监测", digital: "0 / 0", mechanism: "留样柜", digitalKey: "1 / 1" },
+        { key: 2, name: "晨检机", digital: "1 / 1", mechanism: "点评机", digitalKey: "0 / 0" },
+        { key: 3, name: "资质", digital: "19", mechanism: "健康证", digitalKey: "94" }
       ],
-      risk:'低风险',
-      score:'100',
-      ranking:'排名',
-      num:1
+      risk: "低风险",
+      score: "100",
+      ranking: "排名",
+      num: 1
     },
     {
-      titleName:'某某小学',
-      video:'屏幕',
-      intermediate:[
-        {key:1,name:'环境监测',digital:'0 / 0', mechanism:'留样柜',digitalKey:'1 / 1'},
-        {key:2,name:'晨检机',digital:'1 / 1',mechanism:'点评机',digitalKey:'0 / 0'},
-        {key:3,name:'资质',digital:'19',mechanism:'健康证',digitalKey:'94'}
+      titleName: "某某中学",
+      video: "屏幕",
+      intermediate: [
+        { key: 1, name: "环境监测", digital: "0 / 0", mechanism: "留样柜", digitalKey: "1 / 1" },
+        { key: 2, name: "晨检机", digital: "1 / 1", mechanism: "点评机", digitalKey: "0 / 0" },
+        { key: 3, name: "资质", digital: "19", mechanism: "健康证", digitalKey: "94" }
       ],
-      risk:'低风险',
-      score:'95',
-      ranking:'排名',
-      num:2
+      risk: "低风险",
+      score: "95",
+      ranking: "排名",
+      num: 2
     },
     {
-      titleName:'某某小学',
-      video:'屏幕',
-      intermediate:[
-        {key:1,name:'环境监测',digital:'0 / 0', mechanism:'留样柜',digitalKey:'1 / 1'},
-        {key:2,name:'晨检机',digital:'1 / 1',mechanism:'点评机',digitalKey:'0 / 0'},
-        {key:3,name:'资质',digital:'19',mechanism:'健康证',digitalKey:'94'}
+      titleName: "某某幼儿园",
+      video: "屏幕",
+      intermediate: [
+        { key: 1, name: "环境监测", digital: "0 / 0", mechanism: "留样柜", digitalKey: "1 / 1" },
+        { key: 2, name: "晨检机", digital: "1 / 1", mechanism: "点评机", digitalKey: "0 / 0" },
+        { key: 3, name: "资质", digital: "19", mechanism: "健康证", digitalKey: "94" }
       ],
-      risk:'低风险',
-      score:'80',
-      ranking:'排名',
-      num:3
+      risk: "低风险",
+      score: "80",
+      ranking: "排名",
+      num: 3
     },
     {
-      titleName:'某某小学',
-      video:'屏幕',
-      intermediate:[
-        {key:1,name:'环境监测',digital:'0 / 0', mechanism:'留样柜',digitalKey:'1 / 1'},
-        {key:2,name:'晨检机',digital:'1 / 1',mechanism:'点评机',digitalKey:'0 / 0'},
-        {key:3,name:'资质',digital:'19',mechanism:'健康证',digitalKey:'94'}
+      titleName: "某某小学",
+      video: "屏幕",
+      intermediate: [
+        { key: 1, name: "环境监测", digital: "0 / 0", mechanism: "留样柜", digitalKey: "1 / 1" },
+        { key: 2, name: "晨检机", digital: "1 / 1", mechanism: "点评机", digitalKey: "0 / 0" },
+        { key: 3, name: "资质", digital: "19", mechanism: "健康证", digitalKey: "94" }
       ],
-      risk:'低风险',
-      score:'90',
-      ranking:'排名',
-      num:4
-    },{
-      titleName:'某某小学',
-      video:'屏幕',
-      intermediate:[
-        {key:1,name:'环境监测',digital:'0 / 0', mechanism:'留样柜',digitalKey:'1 / 1'},
-        {key:2,name:'晨检机',digital:'1 / 1',mechanism:'点评机',digitalKey:'0 / 0'},
-        {key:3,name:'资质',digital:'19',mechanism:'健康证',digitalKey:'94'}
+      risk: "低风险",
+      score: "90",
+      ranking: "排名",
+      num: 4
+    },
+    {
+      titleName: "某某小学",
+      video: "屏幕",
+      intermediate: [
+        { key: 1, name: "环境监测", digital: "0 / 0", mechanism: "留样柜", digitalKey: "1 / 1" },
+        { key: 2, name: "晨检机", digital: "1 / 1", mechanism: "点评机", digitalKey: "0 / 0" },
+        { key: 3, name: "资质", digital: "19", mechanism: "健康证", digitalKey: "94" }
       ],
-      risk:'低风险',
-      score:'100',
-      ranking:'排名',
-      num:1
+      risk: "低风险",
+      score: "100",
+      ranking: "排名",
+      num: 5
     }
-  ])
+  ]);
 </script>
 <style scoped lang="scss">
-  .home{
+  .home {
     display: flex;
     justify-content: space-between;
     //align-items: center;
     font-size: 14px;
     font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+
     .homeItem {
       width: 100%;
       background: var(--bg-color);
       margin-bottom: 10px;
       box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
       padding: 10px 15px;
-      color:var(--text-color);
-      .homeItemIndex{
+      color: var(--text-color);
+
+      .homeItemIndex {
         margin-bottom: 10px;
         line-height: 1.6;
         border-left: 5px solid #5FB878;
         border-radius: 0 2px 2px 0;
         padding-left: 10px;
-        .homeSpan{
+
+        .homeSpan {
           display: inline-block;
           padding: 0 6px;
           font-size: 12px;
@@ -162,13 +315,14 @@
         }
       }
     }
-    .home2Item{
+
+    .home2Item {
       width: 100%;
       background: var(--bg-color);
       margin-bottom: 10px;
       box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
       padding: 10px 15px;
-      color:var(--text-color);
+      color: var(--text-color);
 
       .header-wrapper {
         display: flex;
@@ -176,6 +330,7 @@
         align-items: center;
         cursor: pointer;
       }
+
       .fold-button {
         display: flex;
         align-items: center;
@@ -194,12 +349,14 @@
 
       .fold-content {
         border-top: var(--border-top);
-        .fold-content_item{
+
+        .fold-content_item {
           margin-top: 15px;
           display: flex;
           justify-content: space-between;
           flex-wrap: wrap;
-          .fold-content_item_index{
+
+          .fold-content_item_index {
             padding: 10px;
             min-height: 90px;
             border-radius: 5px;
@@ -207,29 +364,33 @@
             border-width: 1px;
             border-style: solid;
             background: var(--bg-color);
-            color:var(--text-color);
+            color: var(--text-color);
             box-shadow: 1px 1px 4px rgb(0 0 0 / 8%);
             width: 22%;
             margin-right: 5px;
             margin-bottom: 15px;
-            .fold-content_item_index_top{
+
+            .fold-content_item_index_top {
               display: flex;
               justify-content: space-between;
               align-items: center;
-              color:var(--color);
-              .content{
+              color: var(--color);
+
+              .content {
                 font-weight: bold;
                 font-size: 16px !important;
               }
             }
-            .intermediate{
+
+            .intermediate {
               padding: 5px 7px;
               margin-top: 5px;
               font-size: 12px;
               display: flex;
               justify-content: space-between;
             }
-            hr{
+
+            hr {
               line-height: 0;
               margin: 10px 0;
               padding: 0;
@@ -238,37 +399,127 @@
               clear: both;
               background: 0 0
             }
-            .risk{
+
+            .risk {
               height: 18px;
               line-height: 18px;
               display: inline-block;
               padding: 0 6px;
               font-size: 12px;
               text-align: center;
-              background-color: #FF5722;
+              background-color: rgb(0, 150, 136);
               color: #fff;
               border-radius: 2px;
             }
           }
         }
       }
-      .homeItem2Index{
-        margin-bottom: 10px;
-        border-left: 5px solid #5FB878;
-        border-radius: 0 2px 2px 0;
-        padding-left: 10px;
-        height: 18px;
-        line-height: 18px
+    }
+
+    .home4Item {
+      width: 102.5%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 100px;
+
+      .home4ItemIndex {
+        height: 180px;
+        display: flex;
+        justify-content: space-between;
+        width: 49%;
+
+        .home4ItemIndexItem {
+          width: 49%;
+          background: var(--bg-color);
+          color: var(--text-color);
+          box-shadow: 1px 1px 4px rgb(0 0 0 / 8%);
+        }
+      }
+
+      .home4Item2Index {
+        height: 180px;
+        width: 49%;
+        background: var(--bg-color);
+        color: var(--text-color);
+        box-shadow: 1px 1px 4px rgb(0 0 0 / 8%);
+
+        .home4Item2IndexITem {
+          width: 49%;
+          height: 110px;
+          background: var(--bg-color);
+          color: var(--text-color);
+          box-shadow: 1px 1px 4px rgb(0 0 0 / 8%);
+          padding: 10px 0;
+        }
       }
     }
-    .home3Item{
+
+    .home3Item {
       margin-bottom: 15px;
       border-radius: 2px;
       background: var(--bg-color);
       box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
       padding: 10px 15px;
-      color:var(--text-color);
+      height: 25%;
+      color: var(--text-color);
+
+      .home3ItemIndex {
+        display: flex;
+        flex-wrap: wrap;
+        width: 100%;
+        .home3ItemIndexEachItem {
+          display: flex;
+          flex-wrap: wrap;
+          align-items: center;
+          justify-content: space-around;
+          background-color: #F7F7F7;
+          border-radius: 4px;
+          height: 50px;
+          width: 30%;
+          color: #666;
+          margin-right: 10px;
+          margin-bottom: 10px
+        }
+      }
+    }
+
+    .home5Item{
+      margin-bottom: 15px;
+      border-radius: 2px;
+      background: var(--bg-color);
+      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
+      padding: 10px 15px;
+      height: 10%;
+      color: var(--text-color);
+      .home5ItemIndex {
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+        .home5ItemIndexEachItem {
+          display: flex;
+          flex-wrap: wrap;
+          align-items: center;
+          justify-content: space-around;
+          background-color: #F7F7F7;
+          border-radius: 4px;
+          height: 50px;
+          width: 45%;
+          color: #666;
+          margin-right: 10px;
+          margin-bottom: 10px
+        }
+      }
     }
   }
 
+  .public {
+    margin-bottom: 10px;
+    border-left: 5px solid #5FB878;
+    border-radius: 0 2px 2px 0;
+    padding-left: 10px;
+    height: 18px;
+    line-height: 18px;
+    margin-left: 15px;
+  }
 </style>
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index 5116f00..591b65f 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="user" >
-    <div>
+    <div style="position: relative;margin-right: 5px">
       <div class="user3Item" :style="{ display: !collapsed ? '' : 'none' }">
         <n-tree
           :data="nodes"
@@ -8,7 +8,10 @@
           block-line
         />
       </div>
-      <div class="user3ItemIndex"  :style="{left:!collapsed?'244px':0}" @click="()=>(collapsed = !collapsed)"></div>
+      <div class="user3ItemIndex"  :style="{left:!collapsed?'235px':0}" @click="()=>(collapsed = !collapsed)">
+         <div :class="[!collapsed ? 'user3ItemIndexCollapsedTop' : 'user3ItemIndexCollapsedTopHidden']"></div>
+         <div :class="[!collapsed ? 'user3ItemIndexCollapsedButton' : 'user3ItemIndexCollapsedButtonHidden']"></div>
+      </div>
     </div>
     <div>
       <div class="userItem">
@@ -514,17 +517,77 @@
     }
     .user3ItemIndex{
       position: absolute;
-      top: 48%;
-      left: 0;
       text-align: center;
-      height: 34px;
+      height: 75px;
       line-height: 34px;
-      width: 8px;
+      width: 50px;
       z-index: 1;
       visibility: visible;
       overflow: hidden;
       cursor: pointer;
-      background: red
+      top: calc(50% - 72px);
+      left: 200px;
+      transition: all .2s, background 0s;
+      .user3ItemIndexCollapsedTop{
+        position: absolute;
+        left: 5px;
+        transition: transform .3s cubic-bezier(.4,0,.2,1), background-color .3s cubic-bezier(.4,0,.2,1), width .3s cubic-bezier(.4,0,.2,1);
+        width: 4px;
+        height: 38px;
+        border-radius: 2px;
+        background-color: #bfbfbf
+      }
+      .user3ItemIndexCollapsedTopHidden{
+        position: absolute;
+        left: 5px;
+        transition: transform .3s cubic-bezier(.4,0,.2,1), background-color .3s cubic-bezier(.4,0,.2,1), width .3s cubic-bezier(.4,0,.2,1);
+        width: 4px;
+        height: 38px;
+        border-radius: 2px;
+        background-color: #bfbfbf
+      }
+      .user3ItemIndexCollapsedButton{
+        position: absolute;
+        left: 5px;
+        top: 34px;
+        transition: transform .3s cubic-bezier(.4,0,.2,1), background-color .3s cubic-bezier(.4,0,.2,1), width .3s cubic-bezier(.4,0,.2,1);
+        width: 4px;
+        height: 38px;
+        border-radius: 2px;
+        background-color: #bfbfbf;
+      }
+      .user3ItemIndexCollapsedButtonHidden{
+        position: absolute;
+        left: 5px;
+        top: 34px;
+        transition: transform .3s cubic-bezier(.4,0,.2,1), background-color .3s cubic-bezier(.4,0,.2,1), width .3s cubic-bezier(.4,0,.2,1);
+        width: 4px;
+        height: 38px;
+        border-radius: 2px;
+        background-color: #bfbfbf;
+      }
+    }
+    .user3ItemIndex:hover .user3ItemIndexCollapsedTop{
+      background: #d9d9d9;
+      transform: rotate(15deg);
+      width: 4px;
+    }
+    .user3ItemIndex:hover .user3ItemIndexCollapsedTopHidden{
+      background: #d9d9d9;
+      transform: rotate(-15deg);
+      width: 4px;
+      height: 38px;
+    }
+    .user3ItemIndex:hover .user3ItemIndexCollapsedButton{
+      background: #d9d9d9;
+      transform: rotate(-15deg);
+      width: 4px;
+    }
+    .user3ItemIndex:hover .user3ItemIndexCollapsedButtonHidden{
+      background: #d9d9d9;
+      transform: rotate(15deg);
+      width: 4px;
+      height: 38px;
     }
   }