kevinMao
/
canteen_system
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

用户管理编写显示与隐藏

This commit is contained in:
wangyilin 2025-05-13 15:27:05 +08:00
parent 7302d8cb65
commit 159b1a6a4e
2 changed files with 419 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

447
src/views/index.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<div class="home" > <div class="home">
<div style="width: 72%"> <div style="width: 72%">
<div class="homeItem"> <div class="homeItem">
<blockquote class="homeItemIndex"> <blockquote class="homeItemIndex">
系统公告 系统公告
<span class="homeSpan">2024-11-25</span> <span class="homeSpan">2024-11-25</span>
</blockquote> </blockquote>
@ -10,11 +10,11 @@
<span>为了更方便功能查找使用，从新编排了菜单位置，基础信息相关的页面都在顶部”基础信息“下</span> <span>为了更方便功能查找使用，从新编排了菜单位置，基础信息相关的页面都在顶部”基础信息“下</span>
</div> </div>
<div class="home2Item"> <div class="home2Item">
<blockquote class="homeItem2Index"> <blockquote class="public">
<div class="header-wrapper"> <div class="header-wrapper">
<span>供应商</span> <span>供应商</span>
<div class="fold-button" @click="toggleFold"> <div class="fold-button" @click="toggleFold">
<span>{{ isFold ? '展开' : '收起' }}</span> <span>{{ isFold ? "展开" : "收起" }}</span>
<Icon name="LineMdPerson" :style="{ transform: isFold ? 'rotate(90deg)' : 'rotate(265deg)' }"></Icon> <Icon name="LineMdPerson" :style="{ transform: isFold ? 'rotate(90deg)' : 'rotate(265deg)' }"></Icon>
</div> </div>
</div> </div>
@ -26,24 +26,26 @@
<div class="fold-content_item"> <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" v-for="(item,index) in foldContentItemIndex" :key="index">
<div class="fold-content_item_index_top"> <div class="fold-content_item_index_top">
<div class="content">{{item.titleName}}</div> <div class="content">{{ item.titleName }}</div>
<span>{{item.video}}</span> <span>{{ item.video }}</span>
</div> </div>
<div class="intermediate" v-for="items in item.intermediate" :key="items.key"> <div class="intermediate" v-for="items in item.intermediate" :key="items.key">
<span style="width: 50px">{{items.name}}</span> <span style="width: 50px">{{ items.name }}</span>
<span style="width: 50px">{{items.digital}}</span> <span style="width: 50px">{{ items.digital }}</span>
<span style="width: 50px">{{items.mechanism}}</span> <span style="width: 50px">{{ items.mechanism }}</span>
<span style="width: 50px">{{items.digitalKey}}</span> <span style="width: 50px">{{ items.digitalKey }}</span>
</div> </div>
<hr/> <hr />
<div style="display: flex;align-items: center;justify-content: space-between"> <div style="display: flex;align-items: center;justify-content: space-between">
<div style="display: flex;"> <div style="display: flex;">
<div class="risk">{{item.risk}}</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 style="font-weight: bold;color: #009688 !important;margin-left: 10px;line-height: 18px">
{{ item.score }}分
</div>
</div> </div>
<div style="display: flex"> <div style="display: flex">
<div>{{item.ranking}}</div> <div>{{ item.ranking }}</div>
<div style="margin-left: 10px">{{item.num}}</div> <div style="margin-left: 10px">{{ item.num }}</div>
</div> </div>
</div> </div>
</div> </div>
@ -52,106 +54,257 @@
</div> </div>
</div> </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>
<div style="width: 25%"> <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>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import {ref} from "vue"; import { ref } from "vue";
const isFold = ref(true)
const toggleFold = ()=>{ const isFold = ref(true);
isFold.value = !isFold.value const toggleFold = () => {
} isFold.value = !isFold.value;
};
const foldContentItemIndex = ref([ const foldContentItemIndex = ref([
{ {
titleName:'某某小学', titleName: "某某小学",
video:'屏幕', video: "屏幕",
intermediate:[ intermediate: [
{key:1,name:'环境监测',digital:'0 / 0', mechanism:'留样柜',digitalKey:'1 / 1'}, { key: 1, name: "环境监测", digital: "0 / 0", mechanism: "留样柜", digitalKey: "1 / 1" },
{key:2,name:'晨检机',digital:'1 / 1',mechanism:'点评机',digitalKey:'0 / 0'}, { key: 2, name: "晨检机", digital: "1 / 1", mechanism: "点评机", digitalKey: "0 / 0" },
{key:3,name:'资质',digital:'19',mechanism:'健康证',digitalKey:'94'} { key: 3, name: "资质", digital: "19", mechanism: "健康证", digitalKey: "94" }
], ],
risk:'低风险', risk: "低风险",
score:'100', score: "100",
ranking:'排名', ranking: "排名",
num:1 num: 1
}, },
{ {
titleName:'某某小学', titleName: "某某中学",
video:'屏幕', video: "屏幕",
intermediate:[ intermediate: [
{key:1,name:'环境监测',digital:'0 / 0', mechanism:'留样柜',digitalKey:'1 / 1'}, { key: 1, name: "环境监测", digital: "0 / 0", mechanism: "留样柜", digitalKey: "1 / 1" },
{key:2,name:'晨检机',digital:'1 / 1',mechanism:'点评机',digitalKey:'0 / 0'}, { key: 2, name: "晨检机", digital: "1 / 1", mechanism: "点评机", digitalKey: "0 / 0" },
{key:3,name:'资质',digital:'19',mechanism:'健康证',digitalKey:'94'} { key: 3, name: "资质", digital: "19", mechanism: "健康证", digitalKey: "94" }
], ],
risk:'低风险', risk: "低风险",
score:'95', score: "95",
ranking:'排名', ranking: "排名",
num:2 num: 2
}, },
{ {
titleName:'某某小学', titleName: "某某幼儿园",
video:'屏幕', video: "屏幕",
intermediate:[ intermediate: [
{key:1,name:'环境监测',digital:'0 / 0', mechanism:'留样柜',digitalKey:'1 / 1'}, { key: 1, name: "环境监测", digital: "0 / 0", mechanism: "留样柜", digitalKey: "1 / 1" },
{key:2,name:'晨检机',digital:'1 / 1',mechanism:'点评机',digitalKey:'0 / 0'}, { key: 2, name: "晨检机", digital: "1 / 1", mechanism: "点评机", digitalKey: "0 / 0" },
{key:3,name:'资质',digital:'19',mechanism:'健康证',digitalKey:'94'} { key: 3, name: "资质", digital: "19", mechanism: "健康证", digitalKey: "94" }
], ],
risk:'低风险', risk: "低风险",
score:'80', score: "80",
ranking:'排名', ranking: "排名",
num:3 num: 3
}, },
{ {
titleName:'某某小学', titleName: "某某小学",
video:'屏幕', video: "屏幕",
intermediate:[ intermediate: [
{key:1,name:'环境监测',digital:'0 / 0', mechanism:'留样柜',digitalKey:'1 / 1'}, { key: 1, name: "环境监测", digital: "0 / 0", mechanism: "留样柜", digitalKey: "1 / 1" },
{key:2,name:'晨检机',digital:'1 / 1',mechanism:'点评机',digitalKey:'0 / 0'}, { key: 2, name: "晨检机", digital: "1 / 1", mechanism: "点评机", digitalKey: "0 / 0" },
{key:3,name:'资质',digital:'19',mechanism:'健康证',digitalKey:'94'} { key: 3, name: "资质", digital: "19", mechanism: "健康证", digitalKey: "94" }
], ],
risk:'低风险', risk: "低风险",
score:'90', score: "90",
ranking:'排名', ranking: "排名",
num:4 num: 4
},{ },
titleName:'某某小学', {
video:'屏幕', titleName: "某某小学",
intermediate:[ video: "屏幕",
{key:1,name:'环境监测',digital:'0 / 0', mechanism:'留样柜',digitalKey:'1 / 1'}, intermediate: [
{key:2,name:'晨检机',digital:'1 / 1',mechanism:'点评机',digitalKey:'0 / 0'}, { key: 1, name: "环境监测", digital: "0 / 0", mechanism: "留样柜", digitalKey: "1 / 1" },
{key:3,name:'资质',digital:'19',mechanism:'健康证',digitalKey:'94'} { key: 2, name: "晨检机", digital: "1 / 1", mechanism: "点评机", digitalKey: "0 / 0" },
{ key: 3, name: "资质", digital: "19", mechanism: "健康证", digitalKey: "94" }
], ],
risk:'低风险', risk: "低风险",
score:'100', score: "100",
ranking:'排名', ranking: "排名",
num:1 num: 5
} }
]) ]);
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.home{ .home {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
//align-items: center; //align-items: center;
font-size: 14px; font-size: 14px;
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
.homeItem { .homeItem {
width: 100%; width: 100%;
background: var(--bg-color); background: var(--bg-color);
margin-bottom: 10px; margin-bottom: 10px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
padding: 10px 15px; padding: 10px 15px;
color:var(--text-color); color: var(--text-color);
.homeItemIndex{
.homeItemIndex {
margin-bottom: 10px; margin-bottom: 10px;
line-height: 1.6; line-height: 1.6;
border-left: 5px solid #5FB878; border-left: 5px solid #5FB878;
border-radius: 0 2px 2px 0; border-radius: 0 2px 2px 0;
padding-left: 10px; padding-left: 10px;
.homeSpan{
.homeSpan {
display: inline-block; display: inline-block;
padding: 0 6px; padding: 0 6px;
font-size: 12px; font-size: 12px;
@ -162,13 +315,14 @@
} }
} }
} }
.home2Item{
.home2Item {
width: 100%; width: 100%;
background: var(--bg-color); background: var(--bg-color);
margin-bottom: 10px; margin-bottom: 10px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
padding: 10px 15px; padding: 10px 15px;
color:var(--text-color); color: var(--text-color);
.header-wrapper { .header-wrapper {
display: flex; display: flex;
@ -176,6 +330,7 @@
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
} }
.fold-button { .fold-button {
display: flex; display: flex;
align-items: center; align-items: center;
@ -194,12 +349,14 @@
.fold-content { .fold-content {
border-top: var(--border-top); border-top: var(--border-top);
.fold-content_item{
.fold-content_item {
margin-top: 15px; margin-top: 15px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
.fold-content_item_index{
.fold-content_item_index {
padding: 10px; padding: 10px;
min-height: 90px; min-height: 90px;
border-radius: 5px; border-radius: 5px;
@ -207,29 +364,33 @@
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
background: var(--bg-color); background: var(--bg-color);
color:var(--text-color); color: var(--text-color);
box-shadow: 1px 1px 4px rgb(0 0 0 / 8%); box-shadow: 1px 1px 4px rgb(0 0 0 / 8%);
width: 22%; width: 22%;
margin-right: 5px; margin-right: 5px;
margin-bottom: 15px; margin-bottom: 15px;
.fold-content_item_index_top{
.fold-content_item_index_top {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
color:var(--color); color: var(--color);
.content{
.content {
font-weight: bold; font-weight: bold;
font-size: 16px !important; font-size: 16px !important;
} }
} }
.intermediate{
.intermediate {
padding: 5px 7px; padding: 5px 7px;
margin-top: 5px; margin-top: 5px;
font-size: 12px; font-size: 12px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
hr{
hr {
line-height: 0; line-height: 0;
margin: 10px 0; margin: 10px 0;
padding: 0; padding: 0;
@ -238,37 +399,127 @@
clear: both; clear: both;
background: 0 0 background: 0 0
} }
.risk{
.risk {
height: 18px; height: 18px;
line-height: 18px; line-height: 18px;
display: inline-block; display: inline-block;
padding: 0 6px; padding: 0 6px;
font-size: 12px; font-size: 12px;
text-align: center; text-align: center;
background-color: #FF5722; background-color: rgb(0, 150, 136);
color: #fff; color: #fff;
border-radius: 2px; border-radius: 2px;
} }
} }
} }
} }
.homeItem2Index{ }
margin-bottom: 10px;
border-left: 5px solid #5FB878; .home4Item {
border-radius: 0 2px 2px 0; width: 102.5%;
padding-left: 10px; display: flex;
height: 18px; justify-content: space-between;
line-height: 18px 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; margin-bottom: 15px;
border-radius: 2px; border-radius: 2px;
background: var(--bg-color); background: var(--bg-color);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
padding: 10px 15px; 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> </style>

77
src/views/system/user/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="user" > <div class="user" >
<div> <div style="position: relative;margin-right: 5px">
<div class="user3Item" :style="{ display: !collapsed ? '' : 'none' }"> <div class="user3Item" :style="{ display: !collapsed ? '' : 'none' }">
<n-tree <n-tree
:data="nodes" :data="nodes"
@ -8,7 +8,10 @@
block-line block-line
/> />
</div> </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> <div>
<div class="userItem"> <div class="userItem">
@ -514,17 +517,77 @@
} }
.user3ItemIndex{ .user3ItemIndex{
position: absolute; position: absolute;
top: 48%;
left: 0;
text-align: center; text-align: center;
height: 34px; height: 75px;
line-height: 34px; line-height: 34px;
width: 8px; width: 50px;
z-index: 1; z-index: 1;
visibility: visible; visibility: visible;
overflow: hidden; overflow: hidden;
cursor: pointer; 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;
} }
} }