提交宠物问问
This commit is contained in:
parent
d4f85d9078
commit
cd1e23550d
@ -6,11 +6,307 @@
|
||||
},
|
||||
}
|
||||
</route>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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