认证宠托师
宠托师资格证申请
This commit is contained in:
parent
ae550e6a01
commit
45245cd878
@ -57,7 +57,7 @@ function close() {
|
||||
<style scoped>
|
||||
.modal {
|
||||
display: flex;
|
||||
position: relative;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
106
src/pages/Modal/authentication/2.vue
Normal file
106
src/pages/Modal/authentication/2.vue
Normal file
@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<div v-if="isVisible" class="modal">
|
||||
<div class="certificate_content">
|
||||
<image :src="imgUrl('@/static/certificate/认证宠托师.png')" class="modal-content" />
|
||||
<div class="details">
|
||||
<div class="content">您还未认证，</div>
|
||||
<div class="content">加入我们成为宠托师!</div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; margin-top: 40px">
|
||||
<button open-type="" hover-class="button-hover" class="button_return">返回</button>
|
||||
<button open-type="" hover-class="button-hover" class="button_join">加入</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { imgUrl } from '@/utils/commUtils'
|
||||
|
||||
const props = defineProps({
|
||||
isVisible: Boolean,
|
||||
message: String,
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:isVisible'])
|
||||
|
||||
function close() {
|
||||
emit('update:isVisible', false)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.modal {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.certificate_content {
|
||||
top: 340rpx;
|
||||
left: 90rpx;
|
||||
position: absolute;
|
||||
background-color: #ffffff;
|
||||
height: 800rpx;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
margin: 25px 0;
|
||||
width: 310rpx;
|
||||
height: 362rpx;
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.close {
|
||||
color: #aaa;
|
||||
float: right;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.close:hover,
|
||||
.close:focus {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.details {
|
||||
display: inline-block;
|
||||
height: 100rpx;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.content {
|
||||
text-align: center;
|
||||
color: #363636;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.button_return {
|
||||
height: 90rpx;
|
||||
width: 239rpx;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
border-radius: 70px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #000000;
|
||||
}
|
||||
|
||||
.button_join {
|
||||
height: 90rpx;
|
||||
width: 239rpx;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
border-radius: 70px;
|
||||
background-color: #fccb30;
|
||||
}
|
||||
</style>
|
||||
296
src/pages/Modal/authentication/3.vue
Normal file
296
src/pages/Modal/authentication/3.vue
Normal file
@ -0,0 +1,296 @@
|
||||
<route lang="json5" type="page">
|
||||
{
|
||||
layout: 'default',
|
||||
style: {
|
||||
navigationBarTitleText: '宠托师资格证申请',
|
||||
},
|
||||
}
|
||||
</route>
|
||||
|
||||
<template>
|
||||
<view class="hot">
|
||||
<keep-alive>
|
||||
<view class="container">
|
||||
<view style="position: fixed; top: 0; z-index: 19">
|
||||
<view style="position: relative">
|
||||
<view
|
||||
style="
|
||||
background: #761ee9;
|
||||
width: 100vw;
|
||||
height: 230rpx;
|
||||
border-radius: 0 0 28rpx 28rpx;
|
||||
padding-top: 280px;
|
||||
"
|
||||
></view>
|
||||
<view style="background: #f6f7f9; width: 250vw; height: 60rpx"></view>
|
||||
<view class="swiperImg" style="position: absolute; top: 180px; width: 100vw">
|
||||
<view style="padding: 0 30rpx">
|
||||
<swiper
|
||||
:autoplay="autoplay"
|
||||
:duration="duration"
|
||||
:indicator-dots="indicatorDots"
|
||||
:interval="interval"
|
||||
circular
|
||||
class="swiper"
|
||||
indicator-active-color="rgba(0, 0, 0, 0.3)"
|
||||
indicator-color="rgba(255, 255, 255, 0.5)"
|
||||
style="height: 300rpx"
|
||||
>
|
||||
<swiper-item v-for="(item, index) in swiperList" :key="index">
|
||||
<image
|
||||
:src="item.url"
|
||||
style="height: 100%; width: 100%; border-radius: 30rpx"
|
||||
></image>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</keep-alive>
|
||||
</view>
|
||||
<view class="p-5 bg-gray-100 h-screen" style="margin-top: 480rpx">
|
||||
<!-- 表单区域 -->
|
||||
<view class="mt-5 bg-white p-5 rounded-lg shadow" style="padding: 0">
|
||||
<!-- 导航栏 -->
|
||||
<view class="mb-4 navigation">
|
||||
<text class="text-gray-800 card_font">
|
||||
<image
|
||||
:src="imgUrl('@/static/service/1726299427263.png')"
|
||||
mode="scaleToFill"
|
||||
class="card_accompany"
|
||||
/>
|
||||
先行赔付
|
||||
</text>
|
||||
<text class="text-gray-800 card_font">
|
||||
<image
|
||||
:src="imgUrl('@/static/service/1726299704300.png')"
|
||||
mode="scaleToFill"
|
||||
class="card_accompany"
|
||||
/>
|
||||
喂水喂食
|
||||
</text>
|
||||
<text class="text-gray-800 card_font">
|
||||
<image
|
||||
:src="imgUrl('@/static/service/1726299755235.png')"
|
||||
mode="scaleToFill"
|
||||
class="card_accompany"
|
||||
/>
|
||||
全程监管
|
||||
</text>
|
||||
<text class="text-gray-800 card_font">
|
||||
<image
|
||||
:src="imgUrl('@/static/service/1726299776227.png')"
|
||||
mode="scaleToFill"
|
||||
class="card_accompany"
|
||||
/>
|
||||
安全保障
|
||||
</text>
|
||||
</view>
|
||||
<view class="position">
|
||||
<div class="specific_position">点击此处定位具体位置</div>
|
||||
<image
|
||||
:src="imgUrl('@/static/service/1726370894136.png')"
|
||||
mode="scaleToFill"
|
||||
class="specific_img"
|
||||
/>
|
||||
<div class="get_address">
|
||||
<div
|
||||
style="
|
||||
background-color: #9093ff;
|
||||
border-radius: 10px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin-left: 10px;
|
||||
"
|
||||
></div>
|
||||
<input placeholder="请输入上车地址" v-model="petName" class="address_input" />
|
||||
<image
|
||||
:src="imgUrl('@/static/service/1726383571208.png')"
|
||||
mode="scaleToFill"
|
||||
style="width: 20px; height: 20px"
|
||||
/>
|
||||
</div>
|
||||
<div class="get_address">
|
||||
<div
|
||||
style="
|
||||
background-color: #ffd27d;
|
||||
border-radius: 10px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin-left: 10px;
|
||||
"
|
||||
></div>
|
||||
<input placeholder="请输入宠物到达地址" v-model="petName" class="address_input" />
|
||||
<image
|
||||
:src="imgUrl('@/static/service/1726383534059.png')"
|
||||
mode="scaleToFill"
|
||||
style="width: 20px; height: 20px"
|
||||
/>
|
||||
</div>
|
||||
<div class="get_phone">
|
||||
<image
|
||||
:src="imgUrl('@/static/service/1726383956983.png')"
|
||||
mode="scaleToFill"
|
||||
style="width: 20px; height: 20px"
|
||||
/>
|
||||
<input placeholder="请输入下单人电话" v-model="petName" class="address_input" />
|
||||
<image
|
||||
:src="imgUrl('@/static/service/1726383571208.png')"
|
||||
mode="scaleToFill"
|
||||
style="width: 20px; height: 20px"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button class="get_quote">免费获取报价</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mt-5 bg-white p-5 rounded-lg shadow" style="padding: 0">
|
||||
<div style="display: flex; align-items: center; flex-direction: column; padding: 20px">
|
||||
<image
|
||||
:src="imgUrl('@/static/service/1726389632384.png')"
|
||||
mode="scaleToFill"
|
||||
style="height: 80rpx; padding-bottom: 10px; width: 70%"
|
||||
/>
|
||||
<image
|
||||
:src="imgUrl('@/static/service/1726389664958.png')"
|
||||
mode="scaleToFill"
|
||||
style="height: 100rpx"
|
||||
/>
|
||||
</div>
|
||||
</view>
|
||||
<view class="mt-5 bg-white p-5 rounded-lg shadow" style="padding: 0">
|
||||
<div style="display: flex; align-items: center; flex-direction: column; padding: 20px">
|
||||
<image
|
||||
:src="imgUrl('@/static/service/1726403986495.png')"
|
||||
mode="scaleToFill"
|
||||
style="height: 80rpx; padding-bottom: 10px; width: 70%"
|
||||
/>
|
||||
<image
|
||||
:src="imgUrl('@/static/service/1726404642077.png')"
|
||||
mode="scaleToFill"
|
||||
style="height: 550rpx"
|
||||
/>
|
||||
</div>
|
||||
</view>
|
||||
<view class="mt-5 bg-white p-5 rounded-lg shadow" style="padding: 0">
|
||||
<div style="display: flex; align-items: center; flex-direction: column; padding: 20px">
|
||||
<image
|
||||
:src="imgUrl('@/static/service/1726405469570.png')"
|
||||
mode="scaleToFill"
|
||||
style="height: 80rpx; padding-bottom: 10px; width: 70%"
|
||||
/>
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="js" setup>
|
||||
import { ref, reactive } from 'vue'
|
||||
import { imgUrl, toPath } from '@/utils/commUtils'
|
||||
// 轮播图
|
||||
const swiperList = [
|
||||
{
|
||||
url: 'C:/Users/Administrator/Desktop/picture(2)/100-1.png',
|
||||
},
|
||||
{
|
||||
url: 'C:/Users/Administrator/Desktop/picture(2)/100-1.png',
|
||||
},
|
||||
]
|
||||
const status = 'loadmore'
|
||||
const indicatorDots = true
|
||||
const autoplay = true
|
||||
const interval = 5000
|
||||
const duration = 500
|
||||
const screenInfoList = []
|
||||
const locationInfo = {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
lat: 39.908868,
|
||||
lon: 116.404424,
|
||||
labelList: [1, 2, 3],
|
||||
}
|
||||
const total = 0
|
||||
const scrollTop = 0
|
||||
|
||||
const props = defineProps({
|
||||
tabbar: {
|
||||
type: [String, Boolean],
|
||||
default: '',
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.navigation {
|
||||
border-radius: 10px 10px 0 0;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #ffefeb;
|
||||
}
|
||||
|
||||
.card_accompany {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-left: 18rpx;
|
||||
}
|
||||
|
||||
.card_font {
|
||||
font-size: 13px;
|
||||
color: #ff9a81;
|
||||
}
|
||||
|
||||
.position {
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fa3534;
|
||||
}
|
||||
|
||||
.specific_img {
|
||||
margin: 7px 0;
|
||||
height: 20px;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.specific_position {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.get_address {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1px solid #9093ff;
|
||||
margin-bottom: 40rpx;
|
||||
width: 90%;
|
||||
height: 130rpx;
|
||||
// padding: 15px 80px 15px 80px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.reach_address {
|
||||
border: 1px solid #9093ff;
|
||||
}
|
||||
|
||||
.address_input {
|
||||
margin-left: 15px;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.get_phone {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 90%;
|
||||
height: 100rpx;
|
||||
border-bottom: 1px solid #f4f6f8;
|
||||
}
|
||||
|
||||
.get_quote {
|
||||
margin: 25px 0 20px 0;
|
||||
background-color: #9093ff;
|
||||
color: #f4f6f8;
|
||||
width: 90%;
|
||||
}
|
||||
</style>
|
||||
0
src/pages/Modal/blankPage/1.vue
Normal file
0
src/pages/Modal/blankPage/1.vue
Normal file
@ -1,19 +1,37 @@
|
||||
<template>
|
||||
<button @click="showModal">显示弹窗</button>
|
||||
<button @click="showModal">显示弹窗1</button>
|
||||
<button @click="showModal2">显示弹窗2</button>
|
||||
<button @click="toPath('/pages/Modal/authentication/3')">显示弹窗3</button>
|
||||
<Modal
|
||||
:isVisible="isModalVisible"
|
||||
@update:isVisible="isModalVisible = $event"
|
||||
message="这是一个弹窗内容！"
|
||||
/>
|
||||
<Modal2
|
||||
:isVisible="isModalVisible2"
|
||||
@update:isVisible="isModalVisible2 = $event"
|
||||
message="这是一个弹窗内容！"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import Modal from './authentication/1.vue'
|
||||
import Modal2 from './authentication/2.vue'
|
||||
import Modal3 from './authentication/3.vue'
|
||||
|
||||
const isModalVisible = ref(false)
|
||||
const isModalVisible2 = ref(false)
|
||||
const toPath = (path) => {
|
||||
uni.navigateTo({
|
||||
url: path,
|
||||
})
|
||||
}
|
||||
|
||||
function showModal() {
|
||||
isModalVisible.value = true
|
||||
}
|
||||
function showModal2() {
|
||||
isModalVisible2.value = true
|
||||
}
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user