acdr-ui/src/modules/pet/service/knowledge.vue

<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '宠物宝典',
  },
}
</route>

<template>
  <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>
import { ref, reactive } from 'vue'

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>