E-commerce/src/views/page3/leftBox2.vue

<template>
  <div>
    <boxTop title="移栽区域介绍" />
    <div class="leftBox" v-if="leftBox.名称">
      <div class="title">
        <div class="name">{{ leftBox.名称 }}</div>
        <div class="sub">
          <i :class="[`iconfont`, leftBox.天气图标]"></i>
          <img src="@/assets/img2/综合总览/编组 6.png" alt="" />
          {{ leftBox.温度[0] }}℃ - {{ leftBox.温度[1] }}℃
        </div>
      </div>
      <div class="imgBox">
        <div
          class="img big"
          :style="`background-image: url(${leftBox.图片[0]})`"
        ></div>
        <div class="small">
          <div
            class="img"
            :style="`background-image: url(${leftBox.图片[1]})`"
          ></div>
          <div
            class="img"
            :style="`background-image: url(${leftBox.图片[2]})`"
          ></div>
        </div>
      </div>
      <div class="infoBox">
        <p>区域管理人员：{{ leftBox.管理人员 }}</p>
        <p>区域联系电话：{{ leftBox.联系电话 }}</p>
        <p>区域地址：{{ leftBox.地址 }}</p>
        <p>区域面积(M2)：{{ leftBox.面积 }}</p>
        <p>烟农数量：{{ leftBox.烟农数量 }}</p>
      </div>
      <div class="infoBox">
        <h2>区域简介</h2>
        <div class="htmlBox" v-html="leftBox.简介"></div>
      </div>
    </div>
  </div>
</template>

<script>
import item from './item.vue'
import boxTop from '@/components/boxTop/index.vue'
import { getWeather } from '@/assets/js/utils'

export default {
  data() {
    return {
      leftBox: {},
    }
  },
  components: {
    boxTop,
  },
  async created() {
    this.infoFn()
  },
  methods: {
    async infoFn() {
      const baseId = this.$route.query.baseId || 1
      const data = await this.$http.get(`/api/base/${baseId}`)
      this.leftBox = data
      this.leftBox.天气图标 =
        getWeather(this.leftBox.天气).icon || `icon-duoyun`
      console.log(`data`, data, this.leftBox)
    },
    clearFn() {
      this.infoFn()
      console.log(`clearFn`)
    },
    sortFn() {
      this.infoFn()
      console.log(`sortFn`)
    },
  },
}
</script>

<style lang="less" scoped>
.leftBox {
  height: 845px;
  width: 401px;
  background: rgba(48, 42, 42, 0.3);
  backdrop-filter: blur(8px);
  padding: 15px;
  box-sizing: border-box;
  .title {
    padding: 10px;
    box-sizing: border-box;
    border: 2px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(16px);
    min-height: 73px;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(16px);
    .name {
      font-size: 20px;
    }
    .sub {
      padding-top: 6px;
      & > * {
        display: inline-block;
        vertical-align: middle;
      }
      .iconfont {
        font-size: 22px;
        margin-right: 6px;
      }
      img {
        height: 22px;
        margin-right: 6px;
      }
    }
  }
  .imgBox {
    display: flex;
    justify-content: center;
    margin-top: 15px;
    .img {
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
    }
    .big {
      width: 228px;
      height: 196px;
      margin-right: 10px;
    }
    .small {
      width: 113px;
      .img {
        width: 113px;
        height: 93px;
        margin-bottom: 10px;
      }
    }
  }
  .infoBox {
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(16px);
    padding: 10px;
    margin-top: 15px;
    h2 {
      padding-bottom: 6px;
      border-bottom: 1px solid #979797;
    }
    .htmlBox {
      ::v-deep p {
        text-indent: 2em;
      }
      padding: 10px;
      height: 330px;
      overflow: auto;
    }
  }
}
</style>