xytSk-App/pages/gqzq/detail/index.vue

<template>
  <view class="container">
    <view class="nav_bar">
      <!-- <u-navbar title="查看" @rightClick="rightClick" :autoBack="true">
      </u-navbar> -->
      <u-icon
        name="arrow-left"
        @click="rightClick"
        color="#2979ff"
        size="28"
      ></u-icon>
      <view class="nav_bar_tit"> 查看 </view>
    </view>

    <!-- 上一条下一条 -->
    <view class="tabs_h">
      <div
        class="leftTab"
        :class="{ activetextTypeTab: showTextTypeTab == 1 }"
        @click="perClick(1)"
      >
        上一条
      </div>
      <div
        class="rightTab"
        :class="{ activetextTypeTab: showTextTypeTab == 2 }"
        @click="nextClick(2)"
      >
        下一条
      </div>
    </view>

    <!-- info -->
    <view class="info">
      <u-form
        labelPosition="left"
        :model="infoForm"
        ref="infoForm"
        labelWidth="100"
      >
        <u-form-item
          label="工程类型"
          prop="projectType"
          borderBottom
          ref="item3"
        >
          <u--input
            v-model="infoForm.projectType"
            placeholder="请输入内容"
            border="surround"
            disabled
          ></u--input>
        </u-form-item>
        <!-- 工程名称 -->
        <u-form-item
          label="工程名称"
          prop="projectName"
          borderBottom
          ref="item3"
        >
          <u--input
            v-model="infoForm.projectName"
            placeholder="请输入内容"
            border="surround"
            disabled
          ></u--input>
        </u-form-item>
        <!-- 是否发电 -->
        <u-form-item
          label="是否发电"
          prop="isPowerGeneration"
          borderBottom
          ref="item3"
        >
          <u--input
            v-model="infoForm.isPowerGeneration"
            placeholder="请输入内容"
            border="surround"
            disabled
          ></u--input>
        </u-form-item>
        <!-- 是否泄洪 -->
        <u-form-item
          label="是否泄洪"
          prop="isFloodRelease"
          borderBottom
          ref="item3"
        >
          <u--input
            v-model="infoForm.isFloodRelease"
            placeholder="请输入内容"
            border="surround"
            disabled
          ></u--input>
        </u-form-item>
        <!-- 水位(m) -->
        <u-form-item label="水位(m)" prop="waterLevel" borderBottom ref="item3">
          <u--input
            v-model="infoForm.waterLevel"
            placeholder="请输入内容"
            border="surround"
            disabled
          ></u--input>
        </u-form-item>
        <!-- 入库流量     (m³/s)： -->
        <u-form-item
          label="入库流量(m³/s)"
          prop="inflowVolume"
          borderBottom
          ref="item3"
        >
          <u--input
            v-model="infoForm.inflowVolume"
            placeholder="请输入内容"
            border="surround"
            disabled
          ></u--input>
        </u-form-item>

        <!-- 出库流量     (m³/s)： -->
        <u-form-item
          label="出库流量(m³/s)"
          prop="outflowVolume"
          borderBottom
          ref="item3"
        >
          <u--input
            v-model="infoForm.outflowVolume"
            placeholder="请输入内容"
            border="surround"
            disabled
          ></u--input>
        </u-form-item>
        <!-- 其他运行情况 -->
        <u-form-item
          label="其他运行情况"
          prop="remark"
          borderBottom
          ref="item3"
        >
          <u--textarea
            v-model="infoForm.remark"
            placeholder="请输入内容"
            disabled
          ></u--textarea>
        </u-form-item>
        <!-- 上报人 -->
        <u-form-item label="上报人" prop="reporter" borderBottom ref="item3">
          <u--input
            v-model="infoForm.reporter"
            placeholder="请输入内容"
            border="surround"
            disabled
          ></u--input>
        </u-form-item>
        <!-- 上报单位 -->
        <u-form-item
          label="上报单位"
          prop="reportUnit"
          borderBottom
          ref="item3"
        >
          <u--input
            v-model="infoForm.reportUnit"
            placeholder="请输入内容"
            border="surround"
            disabled
          ></u--input>
        </u-form-item>
        <!-- 上报时间 -->
        <u-form-item
          label="上报时间"
          prop="reportTime"
          borderBottom
          ref="item3"
        >
          <u--input
            v-model="infoForm.reportTime"
            placeholder="请输入内容"
            border="surround"
            disabled
          ></u--input>
        </u-form-item>
        <!-- 附件 -->
        <u-form-item
          label="附件"
          prop="checkboxValue1"
          borderBottom
          ref="item3"
        >
          <image
            :showLoading="true"
            :src="src"
            width="80px"
            height="80px"
            mode="aspectFit"
            @click="toggleZoom"
            :style="{ transform: `scale(${zoomed ? 2 : 1})` }"
          ></image>
        </u-form-item>
      </u-form>
    </view>
  </view>
</template>
<script>
import moment from 'moment'
export default {
  props: ['info'],
  data () {
    return {
      showTextTypeTab: 0,
      src: '../../../static/tabs/bigImg.png',
      infoForm: {
        checkboxValue1: '水库',
        reporter: '' // 上报人
      },
      zoomed: false
    }
  },

  mounted () {
    console.log('info', this.info)
    this.infoForm = this.info
  },
  methods: {
    // 切换图片放大状态的方法
    toggleZoom () {
      this.zoomed = !this.zoomed
    },
    perClick (val) {
      this.showTextTypeTab = val
    },
    nextClick (val) {
      this.showTextTypeTab = val
    },
    // 返回按钮
    rightClick () {
      console.log('rightClick')
      this.$emit('rightClick', false)
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  font-size: 14px;
  background-color: #f3f5f8;
}
.tabs_h {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 56rpx;
  line-height: 88rpx;
  background-color: #fff;
  margin-bottom: 12rpx;
  text-align: center;
}
.leftTab {
  width: 80px;
}
.rightTab {
  width: 80px;
}
.activetextTypeTab,
.activetextTypeTab:hover {
  //   border-bottom: 3rpx solid #2286f6;
  color: #026be0;
}

.nav_bar {
  width: 100%;
  margin-top: 30px;
  padding-top: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #dfdfdf;
  box-shadow: 0 5px 10px -8px #dfdfdf inset;
  background-color: #fff;
  margin-bottom: 12rpx;
}
.nav_bar_tit {
  text-align: center;
}
.info {
  background-color: #fff;
  margin-bottom: 12rpx;
  //   text-align: right;
  padding: 20px;
}

.fl {
  display: flex;
  justify-content: center;
  align-items: left;
}
.flsb {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.u-image {
  width: 100%; /* 或者其他尺寸 */
  transition: transform 0.3s; /* 平滑的放大效果 */
}
</style>