155 lines
2.8 KiB
Vue
155 lines
2.8 KiB
Vue
<template>
|
|
<view class="container">
|
|
<ZdyNavbar :title="data.navbar.title" :bgColor="data.navbar.bgColor" :isAdd="true" :isSearch="$system=='Android'">
|
|
</ZdyNavbar>
|
|
|
|
<view class="card-grid">
|
|
<view class="card" v-for="(item, index) in cardList" :key="index">
|
|
<view class="title">
|
|
{{item.title}}
|
|
</view>
|
|
<image :src="item.img" class="card-img" />
|
|
<button class="card-btn" @click="create(index)">立即制作</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import ZdyNavbar from "@/components/nav-bar/nav-bar.vue"
|
|
|
|
import {
|
|
ref,
|
|
reactive,
|
|
getCurrentInstance
|
|
} from 'vue'
|
|
import {
|
|
onLoad,
|
|
onShow,
|
|
onUnload,
|
|
onReady,
|
|
onPullDownRefresh,
|
|
onReachBottom
|
|
} from "@dcloudio/uni-app";
|
|
const {
|
|
appContext,
|
|
proxy
|
|
} = getCurrentInstance();
|
|
const data = reactive({
|
|
navbar: {
|
|
title: '证件选择',
|
|
bgColor: ''
|
|
}
|
|
})
|
|
onLoad(()=>{
|
|
proxy.$apiUserEvent('all', {
|
|
type: 'event',
|
|
key: 'certificate',
|
|
prefix: '.uni.other.',
|
|
value:'证书首页'
|
|
})
|
|
})
|
|
const cardList = ref([
|
|
{
|
|
title: '身份证',
|
|
img: '/static/image/other/certificate/certificate1.png',
|
|
},
|
|
{
|
|
title: '毕业证',
|
|
img: '/static/image/other/certificate/certificate2.png',
|
|
},
|
|
{
|
|
title: '情侣证',
|
|
img: '/static/image/other/certificate/certificate3.png',
|
|
},
|
|
{
|
|
title: '分手证',
|
|
img: '/static/image/other/certificate/certificate4.png',
|
|
},
|
|
{
|
|
title: '奖状',
|
|
img: '/static/image/other/certificate/certificate5.png',
|
|
},
|
|
{
|
|
title: '颜值证',
|
|
img: '/static/image/other/certificate/certificate6.png',
|
|
},
|
|
])
|
|
function create(index){
|
|
if(index){
|
|
|
|
uni.navigateTo({
|
|
url:'/pages/other/certificate/graduate?styleType='+(index-1)
|
|
})
|
|
}else{
|
|
uni.navigateTo({
|
|
url:'/pages/other/card/card'
|
|
})
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.container {
|
|
padding: 20rpx;
|
|
background-color: #F0F4F9;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
|
|
|
|
.card-grid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.card {
|
|
width: 48%;
|
|
background-color: #fff;
|
|
border-radius: 20rpx;
|
|
padding: 20rpx;
|
|
margin-bottom: 30rpx;
|
|
align-items: center;
|
|
/* box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05); */
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
}
|
|
.title{
|
|
font-size: 14px;
|
|
color: #1A1A1A;
|
|
line-height: 14px;
|
|
font-weight: bold;
|
|
padding-top: 10rpx;
|
|
}
|
|
.card-img {
|
|
width: 130px;
|
|
height: 80px;
|
|
/* border-radius: 8px 8px 8px 8px; */
|
|
margin-top: 21px;
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
|
|
.card-btn {
|
|
width: 68px;
|
|
height: 28px;
|
|
background: linear-gradient(327deg, #1777FF 0%, #17CDFF 100%);
|
|
border-radius: 8px 8px 8px 8px;
|
|
font-size: 12px;
|
|
color: #FFFFFF;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
button::after{
|
|
border: none;
|
|
}
|
|
button{
|
|
padding: 0;
|
|
margin: 0;
|
|
border: none;
|
|
}
|
|
</style> |