宠物陪伴
This commit is contained in:
parent
67baea2cb2
commit
1db58c28e8
@ -6,6 +6,7 @@
|
||||
},
|
||||
}
|
||||
</route>
|
||||
|
||||
<template>
|
||||
<view class="hot">
|
||||
<keep-alive>
|
||||
@ -22,7 +23,6 @@
|
||||
"
|
||||
></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
|
||||
@ -36,7 +36,6 @@
|
||||
indicator-color="rgba(255, 255, 255, 0.5)"
|
||||
style="height: 300rpx"
|
||||
>
|
||||
<!-- @click="clickSwiper(item.redirectUrl)"-->
|
||||
<swiper-item v-for="(item, index) in swiperList" :key="index">
|
||||
<image
|
||||
:src="item.url"
|
||||
@ -47,45 +46,148 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 宠物托运下半内容 -->
|
||||
<view class="accompany_button">
|
||||
<view class="acc_navigation">
|
||||
<div>
|
||||
<img src="" alt="" />
|
||||
<span>先行赔付</span>
|
||||
</div>
|
||||
<div>
|
||||
<img src="" alt="" />
|
||||
<span>喂水喂食</span>
|
||||
</div>
|
||||
<div>
|
||||
<img src="" alt="" />
|
||||
<span>全程监管</span>
|
||||
</div>
|
||||
<div>
|
||||
<img src="" alt="" />
|
||||
<span>安全保障</span>
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</keep-alive>
|
||||
<uni-popup ref="popupQr" type="dialog">
|
||||
<uni-popup-dialog
|
||||
:before-close="true"
|
||||
:duration="2000"
|
||||
content="是否拨打电话"
|
||||
@close="close"
|
||||
@confirm="confirm"
|
||||
></uni-popup-dialog>
|
||||
</uni-popup>
|
||||
<home-tabbar :propIndex="2"></home-tabbar>
|
||||
<s-tabbar v-if="tabbar !== ''" :path="tabbar" />
|
||||
</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 = [
|
||||
@ -121,192 +223,74 @@ const props = defineProps({
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.status_bar {
|
||||
height: var(--status-bar-height);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
page {
|
||||
height: 100%;
|
||||
background: #f6f7f9;
|
||||
}
|
||||
|
||||
.hot {
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: #f7f7fa;
|
||||
|
||||
.backColor {
|
||||
background: #761ee9;
|
||||
height: 230rpx;
|
||||
}
|
||||
|
||||
.container {
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.swiperImg {
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.hotScreen {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
margin: 0 0 30rpx 0;
|
||||
height: 320rpx;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
padding: 0 30rpx;
|
||||
background: #f6f7f9;
|
||||
|
||||
.backImg {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
width: 100%;
|
||||
height: 250rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
}
|
||||
|
||||
.bottomInfo {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20rpx;
|
||||
background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
|
||||
|
||||
.screenName {
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.rightInfo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-size: 26rpx;
|
||||
|
||||
.area {
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
|
||||
.location {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
image {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.screenBottomInfo {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
padding: 0 30rpx;
|
||||
.navigation {
|
||||
border-radius: 10px 10px 0 0;
|
||||
height: 80rpx;
|
||||
background: #fff;
|
||||
font-size: 22rpx;
|
||||
border-radius: 0 0 20rpx 20rpx;
|
||||
|
||||
.leftHotInfo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
text {
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
image {
|
||||
margin-right: 10rpx;
|
||||
width: 30rpx;
|
||||
height: 35rpx;
|
||||
}
|
||||
|
||||
.rank {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 26rpx;
|
||||
margin-left: 30rpx;
|
||||
|
||||
.round {
|
||||
position: absolute;
|
||||
left: 70rpx;
|
||||
top: -15rpx;
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
line-height: 30rpx;
|
||||
text-align: center;
|
||||
border-radius: 18rpx;
|
||||
font-size: 18rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.rankAll {
|
||||
padding: 5rpx 8rpx;
|
||||
width: 70rpx;
|
||||
height: 30rpx;
|
||||
line-height: 30rpx;
|
||||
text-align: center;
|
||||
color: #ff7300;
|
||||
background: #feebdb;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.rankCity {
|
||||
padding: 5rpx 8rpx;
|
||||
width: 70rpx;
|
||||
height: 30rpx;
|
||||
line-height: 30rpx;
|
||||
text-align: center;
|
||||
color: #3917dd;
|
||||
border-radius: 10rpx;
|
||||
background: #ebe7fc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.screenPrice {
|
||||
text:nth-child(1) {
|
||||
font-weight: 700;
|
||||
color: #ff145b;
|
||||
font-size: 34rpx;
|
||||
margin-right: 6rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.accompany_button {
|
||||
padding: 0 10px;
|
||||
padding-right: 100px;
|
||||
margin-top: 120rpx;
|
||||
border-radius: 70px; /* 圆角效果 */
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.acc_navigation {
|
||||
height: 150rpx;
|
||||
display: flex;
|
||||
width: 80%;
|
||||
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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user