Browse Source

解决报错

feature
dai 3 years ago
parent
commit
170cbf34b3
  1. 45
      src/assets/scss/pages/yantai-index.scss
  2. 28
      src/views/pages/yantai-index.vue

45
src/assets/scss/pages/yantai-index.scss

@ -70,30 +70,51 @@
.menu-item { .menu-item {
position: relative; position: relative;
left: 70px;
margin-bottom: 40px; margin-bottom: 40px;
width: 150px; width: 150px;
height: 70px; height: 70px;
line-height: 70px; line-height: 70px;
color: rgba(#fff, 0.6); color: rgba(#fff, 0.6);
font-size: 20px; font-size: 20px;
background: linear-gradient(to left, rgba(rgb(67, 67, 210), 0.3), rgba(#00a, 0));
border-radius: 60px; border-radius: 60px;
text-align: center; text-align: center;
box-shadow: -4px 4px 4px 1px inset rgba(#fff, 0.2);
transition: all 0.2s ease; transition: all 0.2s ease;
&:nth-child(2), &.z-zuo {
&:nth-child(6) { left: 60px;
margin-left: 20px; background: linear-gradient(to left, rgba(rgb(67, 67, 210), 0.3), rgba(#00a, 0));
box-shadow: -4px 4px 6px 0 inset rgba(#fff, 0.2);
&:nth-child(2),
&:nth-child(6) {
margin-left: 20px;
}
&:nth-child(3),
&:nth-child(5) {
margin-left: 20px * 2;
}
&:nth-child(4) {
margin-left: 20px * 2 + 1px;
}
} }
&:nth-child(3),
&:nth-child(5) { &.z-you {
margin-left: 20px * 2; right: 70px;
} background: linear-gradient(to right, rgba(rgb(67, 67, 210), 0.3), rgba(#00a, 0));
&:nth-child(4) { box-shadow: 4px 4px 6px 0 inset rgba(#fff, 0.2);
margin-left: 20px * 2 + 1px;
&:nth-child(2),
&:nth-child(6) {
margin-right: 20px;
}
&:nth-child(3),
&:nth-child(5) {
margin-right: 20px * 2;
}
&:nth-child(4) {
margin-right: 20px * 2 + 1px;
}
} }
&:hover, &:hover,
&.z-on { &.z-on {
transform: scale(1.2); transform: scale(1.2);

28
src/views/pages/yantai-index.vue

@ -11,13 +11,13 @@
<div class="menu"> <div class="menu">
<img class="menu-bg" src="@/assets/img/yantai/index/yuanhu-you.png" /> <img class="menu-bg" src="@/assets/img/yantai/index/yuanhu-you.png" />
<div class="menu-list"> <div class="menu-list">
<div class="menu-item">基础信息</div> <div class="menu-item z-zuo">基础信息</div>
<div class="menu-item">疫情防控</div> <div class="menu-item z-zuo">疫情防控</div>
<div class="menu-item">社区治理</div> <div class="menu-item z-zuo">社区治理</div>
<div class="menu-item z-on">社区党建</div> <div class="menu-item z-zuo z-on">社区党建</div>
<div class="menu-item">社区服务</div> <div class="menu-item z-zuo">社区服务</div>
<div class="menu-item">AI安防</div> <div class="menu-item z-zuo">AI安防</div>
<div class="menu-item">其他</div> <div class="menu-item z-zuo">其他</div>
</div> </div>
</div> </div>
@ -52,13 +52,13 @@
<div class="menu"> <div class="menu">
<img class="menu-bg" src="@/assets/img/yantai/index/yuanhu-zuo.png" /> <img class="menu-bg" src="@/assets/img/yantai/index/yuanhu-zuo.png" />
<div class="menu-list"> <div class="menu-list">
<div class="menu-item">基础信息</div> <div class="menu-item z-you">基础信息</div>
<div class="menu-item">人员预警</div> <div class="menu-item z-you">人员预警</div>
<div class="menu-item">需求清单</div> <div class="menu-item z-you">需求清单</div>
<div class="menu-item z-on">社区党建</div> <div class="menu-item z-you z-on">社区党建</div>
<div class="menu-item">社区治理</div> <div class="menu-item z-you">社区治理</div>
<div class="menu-item">初心互助</div> <div class="menu-item z-you">初心互助</div>
<div class="menu-item">AI安防</div> <div class="menu-item z-you">AI安防</div>
</div> </div>
</div> </div>
</div> </div>

Loading…
Cancel
Save