NanjingMuseumWuJinZang-PC/src/components/PaintingInfoBox.vue

<script setup>
import { ref } from "vue"

// 1-作品简介  2-作者简介
const curState = ref(1)

const props = defineProps({
  title: {
    type: String,
    required: true,
  },
  author: {
    type: String,
    required: true,
  },
  subtitle: {
    type: String,
    required: true,
  },
  age: {
    type: String,
    required: true,
  },
  location: {
    type: String,
    required: true,
  },
  paintingDesc: {
    type: String,
    default: "",
  },
  authorDesc: {
    type: String,
    default: "",
  },
  canClose: {
    type: Boolean,
    default: true,
  },
  size: {
    type: Object,
    default: () => {
      return {
        width: 1,
        height: 1,
      }
    },
  },
})
</script>

<template>
  <div class="info-box">
    <img
      class="close-btn"
      src="@/assets/images/painting-box-back.png"
      alt=""
    >
    <div class="detail-box">
      <div class="top">
        <div class="title">
          {{ curState == 1 ? props.title : "作者简介" }}
        </div>
        <div
          class="exchange"
          @click="curState == 1 ? (curState = 2) : (curState = 1)"
        >
          <img
            src="@/assets/images/icon_change.png"
            alt=""
          >
          {{ curState == 1 ? "作者" : "作品" }}
        </div>
      </div>
      <div class="line" />
      <div
        v-if="curState == 1"
        class="bottom"
      >
        <p>{{ props.author }}</p>
        <p>{{ props.size.width }} x {{ props.size.height }} 厘米</p>
        <p>{{ props.subtitle }}</p>
        <p>{{ props.location }}</p>
        <br>
        <p>{{ props.paintingDesc }}</p>
      </div>
      <div
        v-else-if="curState == 2"
        class="bottom"
      >
        <p>{{ props.authorDesc.length >0? props.authorDesc:'暂无信息' }}</p>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.info-box {
  width: 60%;
  height: 100%;
  background: url(@/assets/images/painting-box-bg.png);
  background-size: 100% 100%;
  position: relative;
  .close-btn {
    position: absolute;
    top: 50%;
    left: 1.5%;
    transform: translateY(-50%);
    cursor: pointer;
  }
  .detail-box {
    width: 95%;
    height: 100%;
    position: absolute;
    // background: rgba(153, 205, 50, 0.39);
    right: 0;
    padding: 7% 7% 0;
    .top {
      width: 100%;
      height: 65px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .title {
        color: #ffecb0;
        font-size: 44px;
        font-family: "KingHwa_OldSong";
        white-space: pre-wrap;
      }
      .exchange {
        display: flex;
        align-items: center;
        color: #e1edd9;
        font-size: 20px;
        font-family: "KaiTi";
        cursor: pointer;
      }
    }
    .line {
      width: 100%;
      height: 1px;
      background: #ffffff;
      margin-top: 20px;
    }
    .bottom {
      width: 100%;
      margin-top: 20px;
      height: 89%;
      overflow: auto;
      font-size: 30px;
      line-height: 35px;
      padding: 10px 40px 0 0 ;
      color: #E1EDD9;
      font-family: 'KaiTi';
      p{
        white-space: pre-wrap;
      }
      &::-webkit-scrollbar {
        width: 4px;
      }
      /* 滚动条轨道（track）的样式 */
      &::-webkit-scrollbar-track {
        background: #f1f1f100; /* 轨道的背景颜色 */
      }

      /* 滚动条滑块（thumb）的样式 */
      &::-webkit-scrollbar-thumb {
        background: #e1edd942; /* 滑块的背景颜色 */
        border-radius: 50px;
      }
    }
  }
}
</style>