Browse Source

初步的

feature
dai 3 years ago
parent
commit
74ac8e4d72
  1. 33
      src/assets/scss/pages/yantai-index.scss
  2. 17
      src/views/pages/yantai-index.vue

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

@ -60,44 +60,57 @@
width: 100%;
margin: 0 auto;
.menu {
position: relative;
.menu-list {
position: absolute;
top: 115px;
top: 50px;
width: 100%;
left: 0;
.menu-item {
position: relative;
left: 70px;
margin-bottom: 30px;
margin-bottom: 40px;
width: 150px;
height: 60px;
line-height: 60px;
color: #fff;
height: 70px;
line-height: 70px;
color: rgba(#fff, 0.6);
font-size: 20px;
background: linelinear-gradient(left, rgba(#00a, 0.5), rgba(#00a, 0));
background: linear-gradient(to left, rgba(rgb(67, 67, 210), 0.3), rgba(#00a, 0));
border-radius: 60px;
text-align: center;
box-shadow: -3px 3px 5px 1px inset rgba(#fff, 0.3);
box-shadow: -4px 4px 4px 1px inset rgba(#fff, 0.2);
transition: all 0.2s ease;
&:nth-child(2),
&:nth-child(6) {
margin-left: 15px;
margin-left: 20px;
}
&:nth-child(3),
&:nth-child(5) {
margin-left: 15px * 2;
margin-left: 20px * 2;
}
&:nth-child(4) {
margin-left: 15px * 3;
margin-left: 20px * 2 + 1px;
}
&:hover,
&.z-on {
transform: scale(1.2);
color: rgba(#fff, 0.95);
}
}
}
}
.arrow {
margin: 0 20px;
}
.item {
position: relative;
width: 420px;
margin: 0 20px;
max-width: 612px;
text-align: center;
cursor: pointer;

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

@ -44,6 +44,23 @@
<!-- 数据分析可视化平台 -->
<div class="name">数据分析平台</div>
</div>
<div class="arrow">
<img src="@/assets/img/yantai/index/you.png" />
</div>
<div class="menu">
<img class="menu-bg" src="@/assets/img/yantai/index/yuanhu-zuo.png" />
<div class="menu-list">
<div class="menu-item">基础信息</div>
<div class="menu-item">人员预警</div>
<div class="menu-item">需求清单</div>
<div class="menu-item z-on">社区党建</div>
<div class="menu-item">社区治理</div>
<div class="menu-item">初心互助</div>
<div class="menu-item">AI安防</div>
</div>
</div>
</div>
</div>
<div class="m-footer">

Loading…
Cancel
Save