平昌需求

This commit is contained in:
liuye
2023-05-31 09:04:39 +08:00
parent 6ee800c0d4
commit 0d3aa3effb
2 changed files with 37 additions and 27 deletions

View File

@@ -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,17 +19,19 @@
</div> </div>
</div> </div>
</div> </div>
<div class="nav" v-if="topic.length"> <div class="nav-content" v-if="topic.length">
<div <div class="nav">
class="nav-item" <div
hover-class="text-hover" class="nav-item"
v-for="(item, index) in topic" :key="index" @click="$linkTo('./TopicDetail?themeId=' + item.id + '&name=' + item.title)"> hover-class="text-hover"
<image :src="item.picUrl" mode="aspectFill"/> v-for="(item, index) in topic" :key="index" @click="$linkTo('./TopicDetail?themeId=' + item.id + '&name=' + item.title)">
<h2>{{ item.title }}</h2> <image :src="item.picUrl" mode="aspectFill"/>
</div> <h2>{{ item.title }}</h2>
<div class="nav-item" hover-class="text-hover" @click="$linkTo('./Topic')" v-if="topicList.length > 6"> </div>
<image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-more.png"/> <div class="nav-item" hover-class="text-hover" @click="$linkTo('./Topic')" v-if="topicList.length > 6">
<h2>更多</h2> <image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-more.png"/>
<h2>更多</h2>
</div>
</div> </div>
</div> </div>
<div class="AppCircle-list"> <div class="AppCircle-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;
} }
} }
} }

View File

@@ -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'
} }
} }
}, },