提交宠物问问
This commit is contained in:
parent
d4f85d9078
commit
cd1e23550d
@ -6,11 +6,307 @@
|
|||||||
},
|
},
|
||||||
}
|
}
|
||||||
</route>
|
</route>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<view class=""></view>
|
<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"
|
||||||
|
>
|
||||||
|
<!-- @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>
|
<script lang="js" setup>
|
||||||
|
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
|
||||||
|
|
||||||
<style lang="scss" scoped></style>
|
const props = defineProps({
|
||||||
|
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,9 +8,197 @@
|
|||||||
</route>
|
</route>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<view class=""></view>
|
<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>
|
<script lang="js" setup>
|
||||||
|
import { ref, reactive } from 'vue'
|
||||||
|
|
||||||
<style lang="scss" scoped></style>
|
import { imgUrl, toPath } from '@/utils/commUtils'
|
||||||
|
|
||||||
|
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