Compare commits
No commits in common. "67baea2cb2d180d584d7cc32c58649c7c8732293" and "d4f85d9078529bac5099277c27824bffa1db5318" have entirely different histories.
67baea2cb2
...
d4f85d9078
@ -82,24 +82,13 @@
|
|||||||
|
|
||||||
<!-- 毛色 -->
|
<!-- 毛色 -->
|
||||||
<view class="mb-4">
|
<view class="mb-4">
|
||||||
<text class="text-gray-800">宠物症状</text>
|
<text class="text-gray-800">宠物毛色</text>
|
||||||
<wd-picker
|
<wd-picker
|
||||||
class="w-full mt-2 p-2 border border-gray-300 rounded"
|
class="w-full mt-2 p-2 border border-gray-300 rounded"
|
||||||
:columns="colorOptions"
|
:columns="colorOptions"
|
||||||
v-model="petColor"
|
v-model="petColor"
|
||||||
/>
|
/>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 情况分析-->
|
|
||||||
<view class="mb-4">
|
|
||||||
<text class="text-gray-800">情况分析</text>
|
|
||||||
<input
|
|
||||||
class="w-full mt-2 p-2 border border-gray-300 rounded"
|
|
||||||
style="height: 65rpx"
|
|
||||||
:max="100"
|
|
||||||
v-model="analysis"
|
|
||||||
/>
|
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 提交按钮 -->
|
<!-- 提交按钮 -->
|
||||||
@ -134,7 +123,6 @@ const petBirthday = ref('')
|
|||||||
const gender = ref('')
|
const gender = ref('')
|
||||||
const petBreed = ref('')
|
const petBreed = ref('')
|
||||||
const petColor = ref('')
|
const petColor = ref('')
|
||||||
const analysis = ref('')
|
|
||||||
const imageSrc = ref('https://via.placeholder.com/150')
|
const imageSrc = ref('https://via.placeholder.com/150')
|
||||||
const userId = ref('')
|
const userId = ref('')
|
||||||
const petId = ref(null)
|
const petId = ref(null)
|
||||||
|
|||||||
@ -6,307 +6,11 @@
|
|||||||
},
|
},
|
||||||
}
|
}
|
||||||
</route>
|
</route>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<view class="hot">
|
<view class=""></view>
|
||||||
<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"
|
|
||||||
>
|
|
||||||
<!-- @click="clickSwiper(item.redirectUrl)"-->
|
|
||||||
<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 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>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="js" setup>
|
<script lang="js" setup></script>
|
||||||
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({
|
<style lang="scss" scoped></style>
|
||||||
tabbar: {
|
|
||||||
type: [String, Boolean],
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
})
|
|
||||||
</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;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@ -8,197 +8,9 @@
|
|||||||
</route>
|
</route>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<view>
|
<view class=""></view>
|
||||||
<image :src="imgUrl('@/static/service/1726016191895.png')" class="logo" />
|
|
||||||
</view>
|
|
||||||
<div class="pet-questions" v-if="!isOpen">
|
|
||||||
<!-- 标题 -->
|
|
||||||
<div class="question">宠物问问</div>
|
|
||||||
<!-- 提问框 -->
|
|
||||||
<div class="question-box">
|
|
||||||
<textarea v-model="question" class="question-input" placeholder="猫粮可以混着吃吗"></textarea>
|
|
||||||
<button class="submit-btn" @click="submitQuestion">提问</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 底部卡片 -->
|
|
||||||
<div @click="toggleContent">
|
|
||||||
<image :src="imgUrl('@/static/service/1726020804039.png')" class="cat-card_button" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="cards">
|
|
||||||
<div class="cards_internal">
|
|
||||||
<image
|
|
||||||
:src="imgUrl('@/static/service/1726038575406.png')"
|
|
||||||
style="height: 15px; width: 70px"
|
|
||||||
/>
|
|
||||||
<div class="title">大家都在看</div>
|
|
||||||
<div class="card_internal">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-title">萌宠早报</div>
|
|
||||||
<p>猫不肯吃药怎么办？</p>
|
|
||||||
</div>
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-title">狗狗喝了驱虫药</div>
|
|
||||||
<p>驱虫药吃嗜正常吗</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 宠物宝典的底部导航 -->
|
|
||||||
<div class="bottom-nav">
|
|
||||||
<div class="bottom_picture">
|
|
||||||
<image :src="imgUrl('@/static/service/1726016220244.png')" class="cat-card" />
|
|
||||||
</div>
|
|
||||||
<div class="bottom_picture">
|
|
||||||
<image :src="imgUrl('@/static/service/1726016243633.png')" class="cat-card" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="js" setup>
|
<script lang="js" setup></script>
|
||||||
import { ref, reactive } from 'vue'
|
|
||||||
|
|
||||||
import { imgUrl, toPath } from '@/utils/commUtils'
|
<style lang="scss" scoped></style>
|
||||||
|
|
||||||
const question = ref('')
|
|
||||||
const questions = ref([])
|
|
||||||
const isOpen = false // 控制卡片的展开与收起
|
|
||||||
|
|
||||||
function submitQuestion() {
|
|
||||||
if (question.value.trim()) {
|
|
||||||
questions.value.push(question.value)
|
|
||||||
question.value = ''
|
|
||||||
}
|
|
||||||
}
|
|
||||||
function toggleContent() {
|
|
||||||
this.isOpen = !isOpen
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.pet-questions {
|
|
||||||
background-color: #dfede4;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
padding: 10px 10px 0 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.question-box {
|
|
||||||
width: 90%;
|
|
||||||
background-color: white;
|
|
||||||
border-radius: 10px;
|
|
||||||
padding: 20px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.question-input {
|
|
||||||
width: 100%;
|
|
||||||
height: 110px;
|
|
||||||
border-radius: 50px;
|
|
||||||
padding: 10px;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.submit-btn {
|
|
||||||
background-color: #34c759; /* 按钮的绿色背景 */
|
|
||||||
color: white; /* 按钮文字的白色 */
|
|
||||||
border: none; /* 去除边框 */
|
|
||||||
padding: 0 30px; /* 调整内边距 */
|
|
||||||
font-size: 16px; /* 调整字体大小 */
|
|
||||||
border-radius: 70px; /* 圆角效果 */
|
|
||||||
cursor: pointer; /* 鼠标悬停时显示为手型 */
|
|
||||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加按钮的阴影效果 */
|
|
||||||
outline: none; /* 去除点击后的轮廓 */
|
|
||||||
transition: background-color 0.3s ease; /* 添加渐变效果 */
|
|
||||||
height: 40px;
|
|
||||||
right: -110px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cards {
|
|
||||||
margin-top: 1px;
|
|
||||||
background-color: #f0f5f2;
|
|
||||||
justify-content: space-between;
|
|
||||||
border-radius: 20px; /* 圆角效果 */
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
background-color: white;
|
|
||||||
border-radius: 10px;
|
|
||||||
height: 170px;
|
|
||||||
width: 100%;
|
|
||||||
padding: 15px;
|
|
||||||
margin-right: 10px;
|
|
||||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-title {
|
|
||||||
color: #56c98d;
|
|
||||||
font-weight: bold;
|
|
||||||
line-height: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bottom-nav {
|
|
||||||
height: 80px;
|
|
||||||
width: 100%;
|
|
||||||
background-color: white;
|
|
||||||
padding: 10px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
position: absolute;
|
|
||||||
align-items: center;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.iconfont {
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cat-card {
|
|
||||||
width: 44px;
|
|
||||||
height: 44px;
|
|
||||||
}
|
|
||||||
.cat-card_button {
|
|
||||||
height: 95px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.question {
|
|
||||||
font-size: 24px;
|
|
||||||
margin: 110px 0 20px 0;
|
|
||||||
}
|
|
||||||
.logo {
|
|
||||||
width: 34px;
|
|
||||||
height: 34px;
|
|
||||||
left: -170px;
|
|
||||||
}
|
|
||||||
.title {
|
|
||||||
color: #8d9f8b;
|
|
||||||
font-size: 16px;
|
|
||||||
margin: 20px 0;
|
|
||||||
left: 25px;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
.card_internal {
|
|
||||||
width: 95%;
|
|
||||||
padding-top: 50px;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
.cards_internal {
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
.bottom_picture {
|
|
||||||
width: 45%;
|
|
||||||
padding-left: 70px;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user