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

首页样式

This commit is contained in:
wangyilin 2025-04-30 15:02:53 +08:00
parent 459af79ca4
commit 430162ee4e
2 changed files with 79 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/main.scss
View File

@ -24,7 +24,7 @@ body {
background-color: var(--bg-color);
color: var(--text-color);
font-family: var(--font-family);
border-top: 1px solid var(--border-top);
border-top: 0 solid var(--border-top);
border-color: var(--border-color);
border-bottom: var(--border-bottom);
transition: all 0.3s ease; /* 平滑过渡效果 */

192
src/views/index.vue
View File

@ -24,126 +24,30 @@
<div class="fold-content">
<!-- 这里放具体内容 -->
<div class="fold-content_item">
<!-- 1-->
<div class="fold-content_item_index">
<div class="fold-content_item_index" v-for="(item,index) in foldContentItemIndex" :key="index">
<div class="fold-content_item_index_top">
<div class="content">某某央厨</div>
<span>屏幕</span>
<div class="content">{{item.titleName}}</div>
<span>{{item.video}}</span>
</div>
<div class="intermediate" v-for="item in List" :key="item.key">
<span style="width: 50px">{{item.name}}</span>
<span style="width: 50px">{{item.digital}}</span>
<span style="width: 50px">{{item.mechanism}}</span>
<span style="width: 50px">{{item.digitalKey}}</span>
<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>
</div>
<hr/>
<div style="display: flex;align-items: center;justify-content: space-between">
<div style="display: flex;">
<div class="risk">低风险</div>
<div style="font-weight: bold;color: #009688 !important;margin-left: 10px;line-height: 18px">100分</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>排名</div>
<div style="margin-left: 10px">1</div>
</div>
</div>
</div>
<!-- 2-->
<div class="fold-content_item_index">
<div class="fold-content_item_index_top">
<div class="content">某某央厨</div>
<span>屏幕</span>
</div>
<div class="intermediate" v-for="item in List" :key="item.key">
<span style="width: 50px">{{item.name}}</span>
<span style="width: 50px">{{item.digital}}</span>
<span style="width: 50px">{{item.mechanism}}</span>
<span style="width: 50px">{{item.digitalKey}}</span>
</div>
<hr/>
<div style="display: flex;align-items: center;justify-content: space-between">
<div style="display: flex;">
<div class="risk">低风险</div>
<div style="font-weight: bold;color: #009688 !important;margin-left: 10px;line-height: 18px">100分</div>
</div>
<div style="display: flex">
<div>排名</div>
<div style="margin-left: 10px">1</div>
</div>
</div>
</div>
<!-- 3-->
<div class="fold-content_item_index">
<div class="fold-content_item_index_top">
<div class="content">某某央厨</div>
<span>屏幕</span>
</div>
<div class="intermediate" v-for="item in List" :key="item.key">
<span style="width: 50px">{{item.name}}</span>
<span style="width: 50px">{{item.digital}}</span>
<span style="width: 50px">{{item.mechanism}}</span>
<span style="width: 50px">{{item.digitalKey}}</span>
</div>
<hr/>
<div style="display: flex;align-items: center;justify-content: space-between">
<div style="display: flex;">
<div class="risk">低风险</div>
<div style="font-weight: bold;color: #009688 !important;margin-left: 10px;line-height: 18px">100分</div>
</div>
<div style="display: flex">
<div>排名</div>
<div style="margin-left: 10px">1</div>
</div>
</div>
</div>
<!-- 4-->
<div class="fold-content_item_index">
<div class="fold-content_item_index_top">
<div class="content">某某央厨</div>
<span>屏幕</span>
</div>
<div class="intermediate" v-for="item in List" :key="item.key">
<span style="width: 50px">{{item.name}}</span>
<span style="width: 50px">{{item.digital}}</span>
<span style="width: 50px">{{item.mechanism}}</span>
<span style="width: 50px">{{item.digitalKey}}</span>
</div>
<hr/>
<div style="display: flex;align-items: center;justify-content: space-between">
<div style="display: flex;">
<div class="risk">低风险</div>
<div style="font-weight: bold;color: #009688 !important;margin-left: 10px;line-height: 18px">100分</div>
</div>
<div style="display: flex">
<div>排名</div>
<div style="margin-left: 10px">1</div>
</div>
</div>
</div>
<!-- 5-->
<div class="fold-content_item_index">
<div class="fold-content_item_index_top">
<div class="content">某某央厨</div>
<span>屏幕</span>
</div>
<div class="intermediate" v-for="item in List" :key="item.key">
<span style="width: 50px">{{item.name}}</span>
<span style="width: 50px">{{item.digital}}</span>
<span style="width: 50px">{{item.mechanism}}</span>
<span style="width: 50px">{{item.digitalKey}}</span>
</div>
<hr/>
<div style="display: flex;align-items: center;justify-content: space-between">
<div style="display: flex;">
<div class="risk">低风险</div>
<div style="font-weight: bold;color: #009688 !important;margin-left: 10px;line-height: 18px">100分</div>
</div>
<div style="display: flex">
<div>排名</div>
<div style="margin-left: 10px">1</div>
<div>{{item.ranking}}</div>
<div style="margin-left: 10px">{{item.num}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
@ -160,14 +64,74 @@
const toggleFold = ()=>{
isFold.value = !isFold.value
}
const List = ref([
{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'}
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'}
],
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'}
],
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'}
],
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'}
],
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
}
])
</script>
<style scoped lang="scss">
.home{
display: flex;
justify-content: space-between;