平昌需求
This commit is contained in:
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="AppCircle" :style="{paddingTop: (statusBarHeight + 110) + 'px'}">
|
<div class="AppCircle" :style="{paddingTop: (statusBarHeight + 102) + 'px'}" :background="background">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<div class="status-bar" :style="{height: statusBarHeight + 'px'}"></div>
|
<div class="status-bar" :style="{height: statusBarHeight + 'px'}"></div>
|
||||||
<div class="nav-bar" :style="{
|
<div class="nav-bar" :style="{
|
||||||
@@ -19,7 +19,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="nav" v-if="topic.length">
|
<div class="nav-content" v-if="topic.length">
|
||||||
|
<div class="nav">
|
||||||
<div
|
<div
|
||||||
class="nav-item"
|
class="nav-item"
|
||||||
hover-class="text-hover"
|
hover-class="text-hover"
|
||||||
@@ -32,6 +33,7 @@
|
|||||||
<h2>更多</h2>
|
<h2>更多</h2>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div class="AppCircle-list">
|
<div class="AppCircle-list">
|
||||||
<div class="item"
|
<div class="item"
|
||||||
v-for="(item, index) in list"
|
v-for="(item, index) in list"
|
||||||
@@ -96,7 +98,8 @@
|
|||||||
current: 1,
|
current: 1,
|
||||||
isFixed: false,
|
isFixed: false,
|
||||||
statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
|
statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
|
||||||
total: 0
|
total: 0,
|
||||||
|
background: {backgroundColor: '#4181FF'}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -291,15 +294,15 @@
|
|||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
.status-bar {
|
.status-bar {
|
||||||
background: #fff;
|
background: #4181FF;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-bar {
|
.nav-bar {
|
||||||
position: relative;
|
position: relative;
|
||||||
color: #000;
|
color: #fff;
|
||||||
font-size: 32px;
|
font-size: 32px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
background: #fff;
|
background: #4181FF;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -320,6 +323,13 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.nav-content {
|
||||||
|
padding-top: 16px;
|
||||||
|
width: 100%;
|
||||||
|
height: 192px;
|
||||||
|
background-image: linear-gradient(0deg, #F3F6F9 0%, #4181FF 100%);
|
||||||
|
margin-bottom: 230px;
|
||||||
|
}
|
||||||
.nav {
|
.nav {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -328,7 +338,7 @@
|
|||||||
padding-top: 30px;
|
padding-top: 30px;
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
box-shadow: inset 0 -1px 0 0 #eeeeee;
|
// box-shadow: inset 0 -1px 0 0 #eeeeee;
|
||||||
|
|
||||||
.nav-item {
|
.nav-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -469,7 +479,7 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
padding: 0 32px;
|
padding: 0 32px;
|
||||||
background: #ffffff;
|
background: #4181FF;
|
||||||
|
|
||||||
.left {
|
.left {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -480,7 +490,7 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
line-height: 100px;
|
line-height: 100px;
|
||||||
color: #222;
|
color: #fff;
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
|
|
||||||
&:first-child {
|
&:first-child {
|
||||||
@@ -498,7 +508,7 @@
|
|||||||
width: 40px;
|
width: 40px;
|
||||||
height: 6px;
|
height: 6px;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
background: #2d7dffff;
|
background: #fff;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
content: ' ';
|
content: ' ';
|
||||||
}
|
}
|
||||||
@@ -518,10 +528,10 @@
|
|||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: #fff;
|
color: #4181FF;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
border: 2px solid #ffffff;
|
border: 2px solid #4181FF;
|
||||||
background: #ff5e5e;
|
background: #fff;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
transform: translateX(50%);
|
transform: translateX(50%);
|
||||||
}
|
}
|
||||||
@@ -532,10 +542,10 @@
|
|||||||
height: 60px;
|
height: 60px;
|
||||||
line-height: 60px;
|
line-height: 60px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #df6b6c;
|
color: #fff;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
border: 1px solid #df6b6c;
|
border: 1px solid #fff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="AppConvenientService">
|
<div class="AppConvenientService">
|
||||||
<u-navbar :is-back="false" title="便民服务" title-color="#000" title-width="300" title-size="32" :background="backgroundNavbar" :title-bold="true"></u-navbar>
|
<u-navbar :is-back="false" title="便民服务" title-color="#fff" title-width="300" title-size="32" :background="backgroundNavbar" :title-bold="true"></u-navbar>
|
||||||
<div class="card-list">
|
<div class="card-list">
|
||||||
<div class="card" v-for="(item,index) in list" :key="index">
|
<div class="card" v-for="(item,index) in list" :key="index">
|
||||||
<h2>{{ $dict.getLabel('homeConfigMenuType', index) }}</h2>
|
<h2>{{ $dict.getLabel('homeConfigMenuType', index) }}</h2>
|
||||||
@@ -29,7 +29,7 @@ export default {
|
|||||||
return {
|
return {
|
||||||
list: [],
|
list: [],
|
||||||
backgroundNavbar: {
|
backgroundNavbar: {
|
||||||
background: '#FFF'
|
background: '#4181FF'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user