123
This commit is contained in:
lcj
@@ -0,0 +1,188 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 顶部 Banner -->
|
||||
<view class="banner">
|
||||
<image class="banner-img" src="https://aliyunoss.hn12301.net/hhrs/hhrs_header.png" mode="widthFix"></image>
|
||||
</view>
|
||||
|
||||
<!-- 金刚区 -->
|
||||
<view class="king-area">
|
||||
<view class="king-item" v-for="(item, index) in kingList" :key="index" @click="goPage(item.url)">
|
||||
<image class="king-icon" :src="item.icon" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 活动指南 -->
|
||||
<view class="guide-section">
|
||||
<view class="section-title">
|
||||
<view class="title-line"></view>
|
||||
<text class="title-text">活动指南</text>
|
||||
</view>
|
||||
<view class="guide-list">
|
||||
<view class="guide-card" v-for="(item, index) in guideList" :key="index" @click="goPage(item.url)">
|
||||
<image class="guide-bg" :src="item.bg" mode="scaleToFill"></image>
|
||||
<view class="guide-info">
|
||||
<text class="guide-title">{{ item.title }}</text>
|
||||
<text class="guide-sub">{{ item.sub }}</text>
|
||||
<view class="guide-tag">官方指南</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
kingList: [
|
||||
{ icon: 'https://aliyunoss.hn12301.net/hhrs/hhrs_wlcg.png', url: '/pages/venue/venue' },
|
||||
{ icon: 'https://aliyunoss.hn12301.net/hhrs/hhrs_shzk.png', url: '/pages/discount/discount' },
|
||||
{ icon: 'https://aliyunoss.hn12301.net/hhrs/hhrs_qyb.png', url: '/pages/rights/rights' },
|
||||
{ icon: 'https://aliyunoss.hn12301.net/hhrs/hhrs_zjmd.png', url: '/pages/winners/winners' }
|
||||
],
|
||||
guideList: [
|
||||
{
|
||||
title: '怀化社保卡惠民活动参加指南',
|
||||
sub: '本地文旅场馆、商户惠民福利',
|
||||
bg: 'https://aliyunoss.hn12301.net/hhrs/hhrs_cjzn.png',
|
||||
url: '/pages/guide/join'
|
||||
},
|
||||
{
|
||||
title: '社保卡领取及使用指南',
|
||||
sub: '全流程办理及激活指引',
|
||||
bg: 'https://aliyunoss.hn12301.net/hhrs/hhrs_syzn.png',
|
||||
url: '/pages/guide/use'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
onLoad() {},
|
||||
methods: {
|
||||
goPage(url) {
|
||||
uni.navigateTo({ url })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
padding-bottom: 120rpx;
|
||||
}
|
||||
|
||||
.banner-img {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 金刚区 */
|
||||
.king-area {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: #ffffff;
|
||||
padding: 24rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.king-item {
|
||||
width: 25%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.king-icon {
|
||||
width: 100rpx;
|
||||
height: 132rpx;
|
||||
}
|
||||
|
||||
/* 活动指南 */
|
||||
.guide-section {
|
||||
background-color: #ffffff;
|
||||
margin-top: 10rpx;
|
||||
padding: 24rpx 20rpx 30rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.title-line {
|
||||
width: 6rpx;
|
||||
height: 32rpx;
|
||||
background-color: #1890ff;
|
||||
border-radius: 3rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.guide-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.guide-card {
|
||||
position: relative;
|
||||
width: 702rpx;
|
||||
height: 252rpx;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.guide-bg {
|
||||
width: 702rpx;
|
||||
height: 252rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.guide-info {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
|
||||
.guide-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #0088FF;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.guide-sub {
|
||||
font-size: 22rpx;
|
||||
color: #949AA0;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.guide-tag {
|
||||
display: inline-block;
|
||||
width: fit-content;
|
||||
padding: 4rpx 16rpx;
|
||||
background-color: #00C0E8;
|
||||
color: #ffffff;
|
||||
font-size: 20rpx;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user