修复bug

src/views/tab1/index.vue

@@ -295,9 +295,8 @@ export default {
     }
         .table {
       border-radius: 8px;
-      overflow: hidden;
       border-radius: 8px;
-      overflow: hidden;
+      // overflow: hidden;
       position: relative;
       margin-top: 25px;
       .title {

src/views/tab1/tab1_add.vue

@@ -32,12 +32,16 @@
             >
               <el-form-item label="项目名称：" prop="name">
                 <el-input
+                  maxlength="32"
+                  show-word-limit
                   v-model="ruleForm.name"
                   placeholder="请输入项目名称"
                 ></el-input>
               </el-form-item>
               <el-form-item label="项目时间：">
                 <el-input
+                  maxlength="32"
+                  show-word-limit
                   v-model="ruleForm.age"
                   placeholder="请输入项目时间"
                 ></el-input>
@@ -84,6 +88,8 @@
               </el-form-item>
               <el-form-item label="项目合作方：">
                 <el-input
+                  maxlength="32"
+                  show-word-limit
                   v-model="ruleForm.cooperation"
                   placeholder="请输入项目合作方"
                 ></el-input>
@@ -95,11 +101,15 @@
           <div class="title">项目网址</div>
           <div class="row" v-for="(item, index) in tab1Arr" :key="index">
             <el-input
+              maxlength="32"
+              show-word-limit
               v-model="tab1Arr[index].name"
               placeholder="网址名称"
               style="width: 200px; margin-right: 20px"
             ></el-input>
             <el-input
+              maxlength="128"
+              show-word-limit
               v-model="tab1Arr[index].href"
               placeholder="URL网址链接"
               style="width: 500px"
@@ -117,13 +127,17 @@
 
           <div class="row" v-for="(item, index) in tab2Arr" :key="index">
             <el-input
+              maxlength="32"
+              show-word-limit
               v-model="tab2Arr[index].name"
-              placeholder="场景名称"
+              placeholder="场景名称(最大为32)"
               style="width: 200px; margin-right: 20px"
             ></el-input>
             <el-input
+              maxlength="128"
+              show-word-limit
               v-model="tab2Arr[index].href"
-              placeholder="URL网址链接"
+              placeholder="URL网址链接(最大为128)"
               style="width: 500px"
             ></el-input>
             <i
@@ -206,6 +220,8 @@
       >
         <el-form-item label="名称：" prop="name">
           <el-input
+            maxlength="50"
+            show-word-limit
             v-model="addForm.name"
             placeholder="请输入名称"
             style="width: 500px"
@@ -213,6 +229,8 @@
         </el-form-item>
         <el-form-item label="链接：" prop="url">
           <el-input
+            maxlength="128"
+            show-word-limit
             style="width: 500px"
             v-model="addForm.url"
             placeholder="请输入网址链接"
@@ -410,8 +428,6 @@ export default {
       ) {
         return this.$message.warning('网址名称或链接不能为空')
       }
-      if (this.tab1Arr[this.tab1Arr.length - 1].name.length > 32) return this.$message.warning('网址名称不能超过32个字')
-      if (this.tab1Arr[this.tab1Arr.length - 1].href.length > 128) return this.$message.warning('网址链接不能超过128个字')
       this.tab1Arr.push({ name: '', href: '' })
     },
     tab1Del (index) {
@@ -489,9 +505,6 @@ export default {
       if (this.ruleForm.name.trim() === '') {
         return this.$message.warning('项目名称不能为空')
       }
-      if (this.ruleForm.name.length > 32) return this.$message.warning('项目名称不能超过32个字')
-      if (this.ruleForm.age.length > 32) return this.$message.warning('项目时间不能超过32个字')
-      if (this.ruleForm.cooperation.length > 32) return this.$message.warning('项目合作方不能超过32个字')
       // 遍历文物数组，得到文物id
       const temp = []
       this.saveAntiqueArr.forEach((v) => {
@@ -504,14 +517,32 @@ export default {
       })
       // 处理项目网址数据
       const websites = {}
-      this.tab1Arr.forEach((v) => {
+      let tempBoo = false
+      let tempBoo1 = false
+      this.tab1Arr.forEach((v, i) => {
         websites[v.name] = v.href
+        if (i !== this.tab1Arr.length - 1) {
+          if (v.name.trim() === '' || v.href.trim() === '') tempBoo = true
+        }
+        if (v.name.trim() === '' && v.href.trim() !== '') tempBoo1 = true
+        if (v.name.trim() !== '' && v.href.trim() === '') tempBoo1 = true
       })
+      if (tempBoo) return this.$message.warning('项目网址名称和链接不能为空')
+      if (tempBoo1) return this.$message.warning('项目网址名称或链接不能为空')
       // 处理三维场景数据
       const scenes = {}
-      this.tab2Arr.forEach((v) => {
+      let tempBoo2 = false
+      let tempBoo3 = false
+      this.tab2Arr.forEach((v, i) => {
         scenes[v.name] = v.href
+        if (i !== this.tab2Arr.length - 1) {
+          if (v.name.trim() === '' || v.href.trim() === '') tempBoo2 = true
+        }
+        if (v.name.trim() === '' && v.href.trim() !== '') tempBoo3 = true
+        if (v.name.trim() !== '' && v.href.trim() === '') tempBoo3 = true
       })
+      if (tempBoo2) return this.$message.warning('三维场景名称和链接不能为空')
+      if (tempBoo3) return this.$message.warning('三维场景名称或链接不能为空')
       const obj = {
         ...this.ruleForm,
         goodsIds: temp.join(','),
@@ -631,10 +662,6 @@ export default {
       if (this.addForm.name.trim() === '') {
         return this.$message.warning('文物名称不能为空')
       }
-      if (this.addForm.name.length > 50) {
-        return this.$message.warning('文物名称不能超过50个字')
-      }
-
       if (this.addForm.url.trim() === '') {
         return this.$message.warning('文物链接不能为空')
       }
@@ -762,6 +789,7 @@ export default {
 }
 .upImgBox {
   display: flex;
+  flex-wrap: wrap;
   .active {
     border: 2px solid #dc3545;
   }

src/views/tab1/tab1_edit.vue

@@ -31,12 +31,16 @@
           >
             <el-form-item label="项目名称：" prop="name">
               <el-input
+                maxlength="32"
+                show-word-limit
                 v-model="ruleForm.name"
                 placeholder="请输入项目名称"
               ></el-input>
             </el-form-item>
             <el-form-item label="项目时间：">
               <el-input
+                maxlength="32"
+                show-word-limit
                 v-model="ruleForm.age"
                 placeholder="请输入项目时间"
               ></el-input>
@@ -83,6 +87,8 @@
             </el-form-item>
             <el-form-item label="项目合作方：">
               <el-input
+                maxlength="32"
+                show-word-limit
                 v-model="ruleForm.cooperation"
                 placeholder="请输入项目合作方"
               ></el-input>
@@ -95,11 +101,15 @@
         <div class="title">项目网址</div>
         <div class="row" v-for="(item, index) in tab1Arr" :key="index">
           <el-input
+            maxlength="32"
+            show-word-limit
             v-model="tab1Arr[index].name"
             placeholder="网址名称"
             style="width: 200px; margin-right: 20px"
           ></el-input>
           <el-input
+            maxlength="128"
+            show-word-limit
             v-model="tab1Arr[index].url"
             placeholder="URL网址链接"
             style="width: 500px"
@@ -117,11 +127,15 @@
         <div class="title">三维场景</div>
         <div class="row" v-for="(item, index) in tab2Arr" :key="index">
           <el-input
+            maxlength="32"
+            show-word-limit
             v-model="tab2Arr[index].name"
             placeholder="网址名称"
             style="width: 200px; margin-right: 20px"
           ></el-input>
           <el-input
+            maxlength="128"
+            show-word-limit
             v-model="tab2Arr[index].url"
             placeholder="URL网址链接"
             style="width: 500px"
@@ -207,6 +221,8 @@
       >
         <el-form-item label="名称：" prop="name">
           <el-input
+            maxlength="50"
+            show-word-limit
             v-model="addForm.name"
             placeholder="请输入名称"
             style="width: 500px"
@@ -214,6 +230,8 @@
         </el-form-item>
         <el-form-item label="链接：" prop="url">
           <el-input
+            maxlength="128"
+            show-word-limit
             style="width: 500px"
             v-model="addForm.url"
             placeholder="请输入网址链接"
@@ -488,9 +506,6 @@ export default {
       if (this.addForm.name.trim() === '') {
         return this.$message.warning('文物名称不能为空')
       }
-      if (this.addForm.name.length > 50) {
-        return this.$message.warning('文物名称不能超过50个字')
-      }
       if (this.addForm.url.trim() === '') {
         return this.$message.warning('文物链接不能为空')
       }
@@ -617,7 +632,7 @@ export default {
         return this.$message.warning('网址名称或链接不能为空')
       }
       if (this.tab1Arr[this.tab1Arr.length - 1].name.length > 32) return this.$message.warning('网址名称不能超过32个字')
-      if (this.tab1Arr[this.tab1Arr.length - 1].href.length > 128) return this.$message.warning('网址链接不能超过128个字')
+      if (this.tab1Arr[this.tab1Arr.length - 1].url.length > 128) return this.$message.warning('网址链接不能超过128个字')
 
       this.tab1Arr.push({ name: '', url: '', id: null })
     },
@@ -668,9 +683,6 @@ export default {
         if (this.ruleForm.name.trim() === '') {
           return this.$message.warning('项目名称不能为空')
         }
-        if (this.ruleForm.name.length > 32) return this.$message.warning('项目名称不能超过32个字')
-        if (this.ruleForm.age.length > 32) return this.$message.warning('项目时间不能超过32个字')
-        if (this.ruleForm.cooperation.length > 32) return this.$message.warning('项目合作方不能超过32个字')
         const res = await projectEdit1(this.ruleForm)
         if (res.code === 0) {
           this.$message.success('项目详情编辑成功')
@@ -680,7 +692,9 @@ export default {
       } else if (this.topTabInd === 1) {
         // console.log('项目网址保存')
         const temp = []
-        this.tab1Arr.forEach((v) => {
+        let tempBoo = false
+        let tempBoo1 = false
+        this.tab1Arr.forEach((v, i) => {
           temp.push({
             id: v.id,
             name: v.name,
@@ -688,7 +702,14 @@ export default {
             type: 'website',
             url: v.url
           })
+          if (i !== this.tab1Arr.length - 1) {
+            if (v.name.trim() === '' || v.url.trim() === '') tempBoo = true
+          }
+          if (v.name.trim() === '' && v.url.trim() !== '') tempBoo1 = true
+          if (v.name.trim() !== '' && v.url.trim() === '') tempBoo1 = true
         })
+        if (tempBoo) return this.$message.warning('项目网址名称和链接不能为空')
+        if (tempBoo1) return this.$message.warning('项目网址名称或链接不能为空')
         const res = await editScene({
           delIds: this.tab1ArrDel.join(','),
           dto: temp
@@ -701,7 +722,9 @@ export default {
       } else if (this.topTabInd === 2) {
         // console.log('三维场景保存')
         const temp = []
-        this.tab2Arr.forEach((v) => {
+        let tempBoo2 = false
+        let tempBoo3 = false
+        this.tab2Arr.forEach((v, i) => {
           temp.push({
             id: v.id,
             name: v.name,
@@ -709,7 +732,15 @@ export default {
             type: 'scene',
             url: v.url
           })
+          if (i !== this.tab2Arr.length - 1) {
+            if (v.name.trim() === '' || v.url.trim() === '') tempBoo2 = true
+          }
+          if (v.name.trim() === '' && v.url.trim() !== '') tempBoo3 = true
+          if (v.name.trim() !== '' && v.url.trim() === '') tempBoo3 = true
         })
+        if (tempBoo2) return this.$message.warning('三维场景名称和链接不能为空')
+        if (tempBoo3) return this.$message.warning('三维场景名称或链接不合要求')
+
         const res = await editScene({
           delIds: this.tab2ArrDel.join(','),
           dto: temp
@@ -913,6 +944,7 @@ export default {
   }
   .upImgBox {
     display: flex;
+    flex-wrap: wrap;
     .active {
       border: 2px solid #dc3545;
     }

src/views/tab1/tab1_look.vue

@@ -6,53 +6,120 @@
     </div>
     <div class="conten">
       <div class="search">
-        <div class="txt">{{tab0Data.name}}</div>
+        <div class="txt">{{ tab0Data.name }}</div>
         <ul>
-          <li v-for="(item,index) in topTab" :key="index" :class="{active:topTabInd===index}" @click="tabCut(index)">
-            <a href="javascript:;">{{item.name}}</a>
-            </li>
+          <li
+            v-for="(item, index) in topTab"
+            :key="index"
+            :class="{ active: topTabInd === index }"
+            @click="tabCut(index)"
+          >
+            <a href="javascript:;">{{ item.name }}</a>
+          </li>
         </ul>
       </div>
       <div class="tabAll">
-      <!-- 项目详情 -->
-      <div id="tab0" class="conten_box">
-        <div class="title">项目详情</div>
-        <div class="row"><div>项目名称：</div>{{tab0Data.name}}</div>
-        <div class="row"><div>项目时间：</div>{{tab0Data.age?tab0Data.age:'-'}}</div>
-        <div class="row"><div>项目分类：</div>{{tab0Data.projectTypeName}}</div>
-        <div class="row"><div>展示形式：</div>{{tab0Data.application}}</div>
-        <div class="row"><div>应用技术：</div>{{tab0Data.technology}}</div>
-        <div class="row"><div>保密级别：</div>{{tab0Data.level}}</div>
-        <div class="row"><div>项目合作方：</div>{{tab0Data.cooperation?tab0Data.cooperation:'-'}}</div>
-      </div>
-      <div id="tab1" class="conten_box">
-        <div class="title">项目网址</div>
-        <div class="row" v-show="item.name&&item.url" v-for="item in tab1Data" :key="item.id"><div>{{item.name}}：</div><a :href="item.url" target="_blank">{{item.url}}</a></div>
-        <div class="noData" v-if="tab1Data.length===1&&tab1Data[0].name===''&&tab1Data[0].url===''">暂无数据</div>
-      </div>
-      <div id="tab2" class="conten_box">
-        <div class="title">三维场景</div>
-        <div class="row" v-show="item.name&&item.url" v-for="item in tab2Data" :key="item.id"><div>{{item.name}}：</div><a :href="item.url" target="_blank">{{item.url}}</a></div>
-        <div class="noData" v-if="tab2Data.length===1&&tab2Data[0].name===''&&tab2Data[0].url===''">暂无数据</div>
-      </div>
-      <div id="tab3" class="conten_box">
-        <div class="title">资料文档</div>
-        <div class="imgBox" v-if="tab3Data.length">
-          <div class="wendang" v-for="item in tab3Data" :key="item.id">
-            <a :href="baseURL+item.filePath" target="_blank" download>{{item.name}}</a>
+        <!-- 项目详情 -->
+        <div id="tab0" class="conten_box">
+          <div class="title">项目详情</div>
+          <div class="row">
+            <div>项目名称：</div>
+            {{ tab0Data.name }}
+          </div>
+          <div class="row">
+            <div>项目时间：</div>
+            {{ tab0Data.age ? tab0Data.age : "-" }}
+          </div>
+          <div class="row">
+            <div>项目分类：</div>
+            {{ tab0Data.projectTypeName }}
+          </div>
+          <div class="row">
+            <div>展示形式：</div>
+            {{ tab0Data.application }}
+          </div>
+          <div class="row">
+            <div>应用技术：</div>
+            {{ tab0Data.technology }}
+          </div>
+          <div class="row">
+            <div>保密级别：</div>
+            {{ tab0Data.level }}
+          </div>
+          <div class="row">
+            <div>项目合作方：</div>
+            {{ tab0Data.cooperation ? tab0Data.cooperation : "-" }}
+          </div>
+        </div>
+        <div id="tab1" class="conten_box">
+          <div class="title">项目网址</div>
+          <div
+            class="row"
+            v-show="item.name && item.url"
+            v-for="item in tab1Data"
+            :key="item.id"
+          >
+            <div>{{ item.name }}：</div>
+            <a :href="item.url" target="_blank">{{ item.url }}</a>
+          </div>
+          <div
+            class="noData"
+            v-if="
+              tab1Data.length === 1 &&
+              tab1Data[0].name === '' &&
+              tab1Data[0].url === ''
+            "
+          >
+            暂无数据
+          </div>
+        </div>
+        <div id="tab2" class="conten_box">
+          <div class="title">三维场景</div>
+          <div
+            class="row"
+            v-show="item.name && item.url"
+            v-for="item in tab2Data"
+            :key="item.id"
+          >
+            <div>{{ item.name }}：</div>
+            <a :href="item.url" target="_blank">{{ item.url }}</a>
+          </div>
+          <div
+            class="noData"
+            v-if="
+              tab2Data.length === 1 &&
+              tab2Data[0].name === '' &&
+              tab2Data[0].url === ''
+            "
+          >
+            暂无数据
+          </div>
+        </div>
+        <div id="tab3" class="conten_box">
+          <div class="title">资料文档</div>
+          <div class="imgBox" v-if="tab3Data.length">
+            <div class="wendang" v-for="item in tab3Data" :key="item.id">
+              <a :href="baseURL + item.filePath" target="_blank" download>{{
+                item.name
+              }}</a>
             </div>
+          </div>
+          <div v-else class="noData">暂无数据</div>
         </div>
-        <div v-else class="noData">暂无数据</div>
-      </div>
-      <div id="tab4" class="conten_box">
-        <div class="title">文物</div>
-        <div class="imgBox" v-if="tab4Data.length">
-          <a :href="item.url" target="_blank" v-for="item in tab4Data" :key="item.id">
-          <img :src="baseURL+item.thumb" :onerror="defaultImg" alt="">{{item.name}}
-          </a>
+        <div id="tab4" class="conten_box">
+          <div class="title">文物</div>
+          <div class="imgBox" v-if="tab4Data.length">
+            <div v-for="item in tab4Data" :key="item.id" :title="item.name">
+              <a :href="item.url" target="_blank">
+                <img :src="baseURL + item.thumb" :onerror="defaultImg" alt="" />
+              </a>
+              <p>{{ item.name }}</p>
+              <!-- 点击详细信息 -->
+              <div class="details" @click="lookDetail(item.id)">详细信息</div>
+            </div>
+          </div>
+          <div v-else class="noData">暂无数据</div>
         </div>
-         <div v-else class="noData">暂无数据</div>
-      </div>
       </div>
       <!-- 底部按钮 -->
       <div class="button_btn">
@@ -60,12 +127,82 @@
         <div class="edit" @click="projecEdit" v-if="userLogo">编 辑</div>
       </div>
     </div>
+    <!-- 点击文详细信息的弹窗 -->
+    <el-dialog title="详细信息" :visible.sync="isShow" @close="isShow = false">
+      <el-form
+        :model="addForm"
+        ref="addForm"
+        label-width="100px"
+        class="demo-ruleForm"
+      >
+        <el-form-item label="名称：">
+          <el-input
+            disabled
+            v-model="addForm.name"
+            placeholder="请输入名称"
+            style="width: 500px"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="链接：">
+          <el-input
+            disabled
+            style="width: 500px"
+            v-model="addForm.url"
+            placeholder="请输入网址链接"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="文物类别：">
+          <el-select v-model="addForm.goodsTypeId" disabled>
+            <el-option
+              v-for="item in antiqueArr"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="文物图片：" class="myImgBox">
+          <div class="upImgBox">
+            <div
+              class="imgdiv"
+              :class="{ active: item.isIndex === 1 }"
+              v-for="(item, index) in imgList"
+              :key="index"
+              @mouseenter="imgIconInd = index"
+              @mouseleave="imgIconInd = null"
+            >
+              <img
+                style="width: 100%; height: 100%"
+                :src="baseURL + item.filePath"
+                :onerror="defaultImg"
+              />
+              <div class="imgIcon" v-show="index === imgIconInd">
+                <i class="el-icon-zoom-in" @click="lookImg(item.filePath)"></i>
+                <a :href="baseURL + item.filePath" target="_blank" download
+                  ><i class="el-icon-download"></i
+                ></a>
+              </div>
+            </div>
+          </div>
+        </el-form-item>
+      </el-form>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="isShow = false">确 定</el-button>
+      </div>
+    </el-dialog>
+        <!-- 点击查看图片 -->
+    <div class="lookImg" v-if="dialogImageIshow">
+      <img :src="baseURL + dialogImageUrl" alt="" :onerror="defaultImg" />
+      <div class="imgBtnX" @click="dialogImageIshow = false">关 闭</div>
+    </div>
+
   </div>
 </template>
 
 <script>
 import axios from '@/utils/request'
-import { getDetail } from '@/apis/tab1'
+import { getDetail, getGoodsType, getAntiqueById } from '@/apis/tab1'
 export default {
   // import引入的组件需要注入到对象中才能使用
   name: 'tab1Look',
@@ -73,6 +210,14 @@ export default {
   data () {
     // 这里存放数据
     return {
+      dialogImageUrl: '',
+      dialogImageIshow: false,
+      imgIconInd: null,
+      isShow: false,
+      antiqueArr: [],
+      addForm: {},
+      imgList: [],
+      // --------------查看详情的数据 👆————————————————————————————————
       userLogo: true, // 用户标识
       baseURL: '',
       tab0Data: {},
@@ -97,6 +242,19 @@ export default {
   watch: {},
   // 方法集合
   methods: {
+    // 文物详情弹窗里面的查看图片
+    lookImg (url) {
+      this.dialogImageUrl = url
+      this.dialogImageIshow = true
+    },
+    // 点击查看详情
+    async lookDetail (id) {
+      const res = await getAntiqueById(id)
+      this.addForm = res.data.entity
+      this.imgList = res.data.file
+      this.isShow = true
+      // console.log(999, res)
+    },
     // 点击编辑调整编辑页面
     projecEdit () {
       this.$router.push({
@@ -117,15 +275,26 @@ export default {
       } else if (index === 2 && this.topTabInd !== index) {
         tabAll.scrollTop = tab0.offsetHeight + tab1.offsetHeight + 20
       } else if (index === 3 && this.topTabInd !== index) {
-        tabAll.scrollTop = tab0.offsetHeight + tab1.offsetHeight + tab2.offsetHeight + 30
+        tabAll.scrollTop =
+          tab0.offsetHeight + tab1.offsetHeight + tab2.offsetHeight + 30
       } else if (index === 4 && this.topTabInd !== index) {
-        tabAll.scrollTop = tab0.offsetHeight + tab1.offsetHeight + tab2.offsetHeight + tab3.offsetHeight + 40
+        tabAll.scrollTop =
+          tab0.offsetHeight +
+          tab1.offsetHeight +
+          tab2.offsetHeight +
+          tab3.offsetHeight +
+          40
       }
       this.topTabInd = index
     }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
   async created () {
+    // 获取文物类别
+    const res1 = await getGoodsType()
+    this.antiqueArr = res1.data
+    this.antiqueArr.unshift({ id: null, name: ' ' })
+
     // 获取服务器前缀地址
     this.baseURL = axios.defaults.baseURL
     // 拿到路由跳转传过来的数据
@@ -164,7 +333,104 @@ export default {
 <style lang='less' scoped>
 //@import url(); 引入公共css类
 .template {
-  .noData{
+   .lookImg {
+    padding-top: 15px;
+    display: flex;
+    justify-content: center;
+    left: 0;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    z-index: 9999;
+    background-color: rgba(0, 0, 0, 0.7);
+    img {
+      max-width: 80vw;
+      max-height: 80vh;
+    }
+    .imgBtnX {
+      cursor: pointer;
+      width: 100px;
+      height: 30px;
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      bottom: 20px;
+      background-color: #fff;
+      border-radius: 8px;
+      color: black;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+  .myImgBox {
+    /deep/.el-form-item__content {
+      display: flex;
+      flex-wrap: wrap;
+    }
+    /deep/.el-upload-dragger {
+      width: 135px;
+      height: 135px;
+      border: 1px solid #ccc;
+    }
+  }
+  .upImgBox {
+    display: flex;
+    flex-wrap: wrap;
+    .active {
+      border: 2px solid #dc3545;
+    }
+  }
+  .imgdiv {
+    position: relative;
+    margin: 0 10px 10px 0;
+    border: 1px solid #ccc;
+    width: 135px;
+    height: 135px;
+    & > img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+    .imgIcon {
+      justify-content: space-around;
+      align-items: center;
+      display: flex;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      background-color: rgba(0, 0, 0, 0.6);
+      i {
+        color: #fff;
+        font-size: 24px;
+        cursor: pointer;
+      }
+      a {
+        i {
+          margin-top: 10px;
+        }
+      }
+      i:hover {
+        color: #dc3545;
+      }
+      & > span {
+        cursor: pointer;
+        color: #fff;
+        position: absolute;
+        bottom: 0px;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+      & > span:hover {
+        color: #dc3545;
+      }
+    }
+  }
+
+  .noData {
     font-weight: 700;
     margin-top: 10px;
   }
@@ -190,7 +456,7 @@ export default {
     .txt {
       font-weight: 700;
       height: 40px;
-      border-bottom: 1px solid #A3A2A9;
+      border-bottom: 1px solid #a3a2a9;
     }
     .search {
       margin-bottom: 10px;
@@ -207,128 +473,144 @@ export default {
           padding-bottom: 5px;
           cursor: pointer;
           margin-right: 100px;
-          a{
-            color:#666;
+          a {
+            color: #666;
           }
         }
         li:hover {
-          border-bottom: 2px solid #DC3545;
+          border-bottom: 2px solid #dc3545;
           a {
             color: black;
           }
         }
         .active {
-          border-bottom: 2px solid #DC3545;
+          border-bottom: 2px solid #dc3545;
           a {
             color: black;
           }
         }
       }
     }
-    .conten_box{
+    .conten_box {
       padding: 15px 30px;
       background-color: #fff;
       margin-top: 10px;
-      .title{
+      .title {
         font-weight: 700;
         padding-bottom: 8px;
         font-size: 20px;
-        color: #C82333;
+        color: #c82333;
         border-bottom: 1px solid #ccc;
       }
-      .row{
+      .row {
         display: flex;
         align-items: center;
         margin: 15px 0 0;
-        &>div{
+        & > div {
           font-weight: 700;
         }
         a {
-          background-color: #E7E9EB;
+          background-color: #e7e9eb;
           padding: 5px 10px;
         }
       }
-      .imgBox{
+      .imgBox {
         display: flex;
         flex-wrap: wrap;
-        &>div {
-        word-wrap: break-word;
-        text-align: center;
-        width: 85px;
-        margin-right: 20px;
+        & > div {
+          word-wrap: break-word;
+          text-align: center;
+          width: 85px;
+          margin-right: 20px;
         }
         img {
           width: 68px;
           height: 75px;
           object-fit: contain;
         }
-        .wendang{
+        .wendang {
           text-align: left;
           margin-top: 10px;
           width: 100%;
-          a:hover{
-            color:#DC3545;
+          a:hover {
+            color: #dc3545;
           }
         }
       }
     }
-    #tab4{
-      .imgBox{
-        &>a {
-        word-wrap: break-word;
-        text-align: center;
-        display: block;
-        cursor: pointer;
-        width: 120px;
-        margin-top: 10px;
-        margin-right: 20px;
-        padding: 15px 0;
-        transition: all .3s;
-            &:hover {
-            transform: translate(2px,-2px);
+    #tab4 {
+      .imgBox {
+        & > div {
+          position: relative;
+          word-wrap: break-word;
+          text-align: center;
+          display: block;
+          width: 120px;
+          height: auto;
+          margin-top: 10px;
+          margin-right: 20px;
+          padding: 15px 0 35px 0;
+          img {
+            transition: all 0.3s;
+          }
+          p {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        }
+        img {
+          &:hover {
+            transform: translate(2px, -2px);
+          }
+          border: 1px solid #ccc;
+          box-shadow: 1px 1px 3px 0px;
+          padding: 5px;
+          width: 120px;
+          height: 120px;
+          margin-bottom: 10px;
+          object-fit: contain;
         }
+        .details {
+          width: 100%;
+          position: absolute;
+          bottom: 5px;
+          left: 50%;
+          transform: translateX(-50%);
+          cursor: pointer;
+          color: #dc3545;
         }
-      img {
-        border: 1px solid #ccc;
-        box-shadow: 1px 1px 3px 0px;
-        padding: 5px;
-        width: 120px;
-        height: 120px;
-        margin-bottom:10px;
-        object-fit: contain;
-      }
       }
-
     }
-    .tabAll{
+    .tabAll {
       border-radius: 10px;
       max-height: 600px;
       overflow-y: auto;
     }
   }
-    .button_btn{
+  .button_btn {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: absolute;
+    left: 100px;
+    bottom: 30px;
+    width: 300px;
+    height: 40px;
+    div {
+      border-radius: 10px;
       display: flex;
-      justify-content: space-between;
+      justify-content: center;
       align-items: center;
-      position: absolute;
-      left: 100px;
-      bottom: 30px;
-      width: 300px;
+      width: 100px;
       height: 40px;
-      div {
-        border-radius: 10px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 100px;
-        height: 40px;
-        background-color: #fff;
-        cursor: pointer;
-      }
-      .edit {
-        color: #fff;
-        background-color: #DC3545;
-      }
+      background-color: #fff;
+      cursor: pointer;
     }
+    .edit {
+      color: #fff;
+      background-color: #dc3545;
+    }
+  }
 }
 </style>

src/views/tab2/index.vue

@@ -286,7 +286,6 @@ export default {
     }
         .table {
       border-radius: 8px;
-      overflow: hidden;
       position: relative;
       margin-top: 25px;
       .title {

src/views/tab3/index.vue

@@ -249,7 +249,6 @@ export default {
     }
         .table {
       border-radius: 8px;
-      overflow: hidden;
       position: relative;
       margin-top: 25px;
       .title {

src/views/tab4/tab4_add.vue

@@ -10,6 +10,8 @@
     >
       <el-form-item label="账号：" prop="userName">
         <el-input
+          maxlength="32"
+          show-word-limit
           :disabled='!!ruleForm.id'
           style="width:300px"
           v-model="ruleForm.userName"
@@ -18,6 +20,8 @@
       </el-form-item>
       <el-form-item label="用户名：" prop="realName">
         <el-input
+          maxlength="32"
+          show-word-limit
           style="width:300px"
           v-model="ruleForm.realName"
           placeholder="请输入用户名"
@@ -31,6 +35,8 @@
       </el-form-item>
             <el-form-item label="部门：" prop="dept">
         <el-input
+          maxlength="32"
+          show-word-limit
           style="width:300px"
           v-model="ruleForm.dept"
           placeholder="请输入部门"
@@ -38,6 +44,8 @@
       </el-form-item>
       <el-form-item label="备注：" prop="remark">
         <el-input
+          maxlength="32"
+          show-word-limit
           style="width:300px"
           v-model="ruleForm.remark"
           placeholder="请输入备注"
@@ -75,9 +83,7 @@ export default {
       },
       rules: {
         userName: [{ required: true, message: '不能为空', trigger: 'blur' }],
-        realName: [{ required: true, message: '不能为空', trigger: 'blur' }],
-        dept: [{ max: 10, message: '不能超过10个字', trigger: 'blur' }],
-        remark: [{ max: 30, message: '不能超过30个字', trigger: 'blur' }]
+        realName: [{ required: true, message: '不能为空', trigger: 'blur' }]
       }
     }
   },
@@ -103,7 +109,7 @@ export default {
         await this.$refs.ruleForm.validate()
         const res = await userSave(this.ruleForm)
         if (res.code === 0) {
-          this.$message.success('新增用户成功')
+          this.$message.success('操作成功')
           // 通知父组件更新
           this.$emit('update')
           this.btnX()