From cd1e23550dc962f8dd24efffefba83e565491cf2 Mon Sep 17 00:00:00 2001
From: caiyuhao <3281194902@qq.com>
Date: Sat, 14 Sep 2024 10:30:54 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E5=AE=A0=E7=89=A9=E9=97=AE?=
=?UTF-8?q?=E9=97=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/pages/service/accompany.vue | 304 +++++++++++++++++++++++++++++++-
src/pages/service/knowledge.vue | 194 +++++++++++++++++++-
2 files changed, 491 insertions(+), 7 deletions(-)
diff --git a/src/pages/service/accompany.vue b/src/pages/service/accompany.vue
index c0892db..a062285 100644
--- a/src/pages/service/accompany.vue
+++ b/src/pages/service/accompany.vue
@@ -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>
diff --git a/src/pages/service/knowledge.vue b/src/pages/service/knowledge.vue
index 30ea8e7..0a1f2b4 100644
--- a/src/pages/service/knowledge.vue
+++ b/src/pages/service/knowledge.vue
@@ -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>