Compare commits
No commits in common. "cf57366afc944866f0f2a934bd59c5cb55582de2" and "6a75aa22053f841c46902a26752725dfc2ed740e" have entirely different histories.
cf57366afc
...
6a75aa2205
@ -6,7 +6,6 @@
|
|||||||
},
|
},
|
||||||
}
|
}
|
||||||
</route>
|
</route>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<view class="hot">
|
<view class="hot">
|
||||||
<keep-alive>
|
<keep-alive>
|
||||||
@ -23,6 +22,7 @@
|
|||||||
"
|
"
|
||||||
></view>
|
></view>
|
||||||
<view style="background: #f6f7f9; width: 250vw; height: 60rpx"></view>
|
<view style="background: #f6f7f9; width: 250vw; height: 60rpx"></view>
|
||||||
|
<!-- 轮播图 -->
|
||||||
<view class="swiperImg" style="position: absolute; top: 180px; width: 100vw">
|
<view class="swiperImg" style="position: absolute; top: 180px; width: 100vw">
|
||||||
<view style="padding: 0 30rpx">
|
<view style="padding: 0 30rpx">
|
||||||
<swiper
|
<swiper
|
||||||
@ -36,6 +36,7 @@
|
|||||||
indicator-color="rgba(255, 255, 255, 0.5)"
|
indicator-color="rgba(255, 255, 255, 0.5)"
|
||||||
style="height: 300rpx"
|
style="height: 300rpx"
|
||||||
>
|
>
|
||||||
|
<!-- @click="clickSwiper(item.redirectUrl)"-->
|
||||||
<swiper-item v-for="(item, index) in swiperList" :key="index">
|
<swiper-item v-for="(item, index) in swiperList" :key="index">
|
||||||
<image
|
<image
|
||||||
:src="item.url"
|
:src="item.url"
|
||||||
@ -46,148 +47,45 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</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>
|
||||||
</view>
|
</view>
|
||||||
</keep-alive>
|
</keep-alive>
|
||||||
</view>
|
<uni-popup ref="popupQr" type="dialog">
|
||||||
<view class="p-5 bg-gray-100 h-screen" style="margin-top: 480rpx">
|
<uni-popup-dialog
|
||||||
<!-- 表单区域 -->
|
:before-close="true"
|
||||||
<view class="mt-5 bg-white p-5 rounded-lg shadow" style="padding: 0">
|
:duration="2000"
|
||||||
<!-- 导航栏 -->
|
content="是否拨打电话"
|
||||||
<view class="mb-4 navigation">
|
@close="close"
|
||||||
<text class="text-gray-800 card_font">
|
@confirm="confirm"
|
||||||
<image
|
></uni-popup-dialog>
|
||||||
:src="imgUrl('@/static/service/1726299427263.png')"
|
</uni-popup>
|
||||||
mode="scaleToFill"
|
<home-tabbar :propIndex="2"></home-tabbar>
|
||||||
class="card_accompany"
|
<s-tabbar v-if="tabbar !== ''" :path="tabbar" />
|
||||||
/>
|
|
||||||
先行赔付
|
|
||||||
</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>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="js" setup>
|
<script lang="js" setup>
|
||||||
import { ref, reactive } from 'vue'
|
|
||||||
import { imgUrl, toPath } from '@/utils/commUtils'
|
import { imgUrl, toPath } from '@/utils/commUtils'
|
||||||
// 轮播图
|
// 轮播图
|
||||||
const swiperList = [
|
const swiperList = [
|
||||||
@ -223,74 +121,192 @@ const props = defineProps({
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.navigation {
|
.status_bar {
|
||||||
border-radius: 10px 10px 0 0;
|
height: var(--status-bar-height);
|
||||||
height: 80rpx;
|
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;
|
||||||
|
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;
|
display: flex;
|
||||||
|
width: 80%;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background-color: #ffefeb;
|
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>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user