소스 검색

修改演员浏览器缩小图片超出问题

zhuxinbo 5 년 전
부모
커밋
d329d2ddaf

+ 10 - 0
src/api/actor.js

@@ -0,0 +1,10 @@
+
+import {axios} from '@/utils/request'
+
+export function actorList(parameter) {
+    return axios({
+      url: "/ctop/actor/list",
+      method: 'get',
+      params: parameter
+    })
+  }

+ 5 - 3
src/components/ctop/vm-card.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="[type === 'horizantal' ? 'vm-card-horizantal' : 'vm-card-vertical' , 'vm-panel']">
-    <div class="card-img" style="height: 250px">
-      <img :src="img" alt="" height="250">
+    <div class="card-img" style="height: 250px" :style="{backgroundImage: 'url(' +img+')', backgroundSize:'contain', backgroundRepeat: 'no-repeat',backgroundPosition:'center center'}">
+      <!-- <img :src="img" alt="" height="250"> -->
       <div v-if="editable && type == 'vertical'" class="control">
         <span class="edit">
           <a :href="editUrl">
@@ -56,7 +56,9 @@
       }
     },
     data: function () {
-
+        return {
+            to:null
+        }
     },
     methods: {
 

+ 128 - 75
src/components/ctop/vm-image-list.vue

@@ -1,105 +1,158 @@
+<style>
+@media (min-width: 1024px) {
+  .checkbox_item_container {
+    width: 70%;
+  }
+} /*>=1024的设备*/
+
+@media (min-width: 1100px) {
+  .checkbox_item_container {
+    width: 70%;
+  }
+} /*>=1100的设备*/
+@media (min-width: 1280px) {
+  .checkbox_item_container_size {
+    width: 70%;
+  }
+}
+
+/*>=1280的设备*/
+
+@media (min-width: 1366px) {
+}
+
+@media (min-width: 1440px) {
+}
+
+@media (min-width: 1680px) {
+}
+@media (min-width: 1920px) {
+  .checkbox_item_container_size {
+    width: 50%;
+  }
+}
+</style>
 <template>
   <div class="vm-image-list">
     <a-row class="image-list-heading vm-panel">
-      <div class="panel-heading">
-        {{ title }}
-      </div>
+      <div class="panel-heading">{{ title }}</div>
       <a-row type="flex" align="middle" justify="space-between" class="panel-body">
-       <div class="search-bar">
+        <div class="search-bar">
           <a-input placeholder="请输入搜索内容" v-model="keyword" style="width: 300px"></a-input>
-<!--          <Button type="ghost" @click="search"><i class="fa fa-search"></i></Button>-->
+          <!--          <Button type="ghost" @click="search"><i class="fa fa-search"></i></Button>-->
         </div>
         <a-row type="flex" align="middle" class="page">
           <span>第</span>
-          <a-input :max="40" :min="1" :number="true" v-model="showNum" class="input-number" @change="updateDataShow"></a-input>
+          <a-input
+            :max="40"
+            :min="1"
+            :number="true"
+            v-model="showNum"
+            class="input-number"
+            @change="updateDataShow"
+          ></a-input>
           <span class="margin-end">/ 页</span>
           <span class="total">总共 {{ data.length }}条</span>
-          <a-pagination :total="data.length" :current="currentPage" :pageSize="showNum" @change="pageChange"></a-pagination>
+          <a-pagination
+            :total="data.length"
+            :current="currentPage"
+            :pageSize="showNum"
+            @change="pageChange"
+          ></a-pagination>
         </a-row>
       </a-row>
     </a-row>
     <a-row class="image-list" :gutter="16">
       <a-col :lg="6" :sm="12" class="vm-margin" v-for="item in dataShow" :key="item.id">
-        <vm-card :editable="true" :title="item.title" :img="item.img" :desc="item.desc" :detailUrl="item.detailUrl" :editUrl="item.editUrl" @delete-ok=" deleteOk(item) "></vm-card>
+        <vm-card
+          :editable="true"
+          :title="item.title"
+          :img="item.img"
+          :desc="item.desc"
+          :detailUrl="item.detailUrl"
+          :editUrl="item.editUrl"
+          @delete-ok=" deleteOk(item) "
+        ></vm-card>
       </a-col>
     </a-row>
   </div>
 </template>
 
 <script>
-  import VmCard from '@/components/ctop/vm-card'
-  import ARow from "ant-design-vue/es/grid/Row";
-  import ACol from "ant-design-vue/es/grid/Col";
-  export default {
-    name: 'VmImageList',
-    components: {
-      ACol,
-      ARow,
-      VmCard
+import VmCard from '@/components/ctop/vm-card'
+import ARow from 'ant-design-vue/es/grid/Row'
+import ACol from 'ant-design-vue/es/grid/Col'
+export default {
+  name: 'VmImageList',
+  components: {
+    ACol,
+    ARow,
+    VmCard
+  },
+  props: {
+    title: {
+      type: String,
+      default: '演员列表'
     },
-    props: {
-      title: {
-        type: String,
-        default: '演员列表'
-      },
-      // origin data
-      data: {
-        type: Array,
-        default: function () {
-          return [
-            {
-              id: '19920805',
-              title: 'Title',
-              img: require('@/assets/img/img-1.jpg'),
-              desc: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry,Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s ly dummy tly dummy tly dummy tly dummy tly dummy tly dummy t',
-              to: '#'
-            }
-          ]
-        }
+    // origin data
+    data: {
+      type: Array,
+      default: function() {
+        return [
+          {
+            id: '19920805',
+            title: 'Title',
+            img: require('@/assets/img/img-1.jpg'),
+            desc:
+              "Lorem Ipsum is simply dummy text of the printing and typesetting industry,Lorem Ipsum has been the industry's standard dummy text ever since the 1500s ly dummy tly dummy tly dummy tly dummy tly dummy tly dummy t",
+            to: '#'
+          }
+        ]
       }
+    }
+  },
+  data: function() {
+    return {
+      keyword: '', // keyword for search
+      dataShow: [], // data for showing
+      showNum: 8, // number of item per page
+      currentPage: 1
+    }
+  },
+  methods: {
+    updateDataShow: function() {
+      let startPage = (this.currentPage - 1) * this.showNum
+      let endPage = startPage + this.showNum
+      this.dataShow = this.data.slice(startPage, endPage)
     },
-    data: function () {
-      return {
-        keyword: '', // keyword for search
-        dataShow: [], // data for showing
-        showNum: 8, // number of item per page
-        currentPage: 1
-      }
+    pageChange: function(page) {
+      this.currentPage = page
+      this.updateDataShow()
     },
-    methods: {
-      updateDataShow: function () {
-        let startPage = (this.currentPage - 1) * this.showNum
-        let endPage = startPage + this.showNum
-        this.dataShow = this.data.slice(startPage, endPage)
-      },
-      pageChange: function (page) {
-        this.currentPage = page
-        this.updateDataShow()
-      },
-      search: function () {
-        let that = this
-        let tempData = that.data
-        that.dataShow = []
-        tempData.forEach(function (elem) {
-          for (let i in elem) {
-            if (elem[i].toString().indexOf(that.keyword) > -1) {
-              that.dataShow.push(elem)
-              return
-            }
+    search: function() {
+      let that = this
+      let tempData = that.data
+      that.dataShow = []
+      tempData.forEach(function(elem) {
+        for (let i in elem) {
+          if (elem[i].toString().indexOf(that.keyword) > -1) {
+            that.dataShow.push(elem)
+            return
           }
-        })
-      },
-      deleteOk: function (data) {
-        this.$emit('delete-ok', data)
-      }
-    },
-    watch: {
-      data: function () {
-        this.dataShow = this.data.slice(0, this.showNum) // update dataShow once data changed
-      }
+        }
+      })
     },
-    mounted: function () {
-      this.dataShow = this.data.slice(0, this.showNum)
+    deleteOk: function(data) {
+      this.$emit('delete-ok', data)
+    }
+  },
+  watch: {
+    data: function() {
+      this.dataShow = this.data.slice(0, this.showNum) // update dataShow once data changed
     }
+  },
+  mounted: function() {
+    this.dataShow = this.data.slice(0, this.showNum)
   }
+}
 </script>

+ 14 - 0
src/views/modules/image/ImageList.vue

@@ -4,11 +4,17 @@
 
 <script>
   import VmImageList from '@/components/ctop/vm-image-list'
+  import {actorList} from "@/api/actor"
   export default {
     name: 'ImageList',
     components: {
       VmImageList
     },
+    mounted(){
+        this.$nextTick(()=>{
+            this.getActorList()
+        })
+    },
     methods: {
       deletefn: function (data) {
         for (let i = 0; i < this.dataImageList.length; i++) {
@@ -16,6 +22,14 @@
             this.dataImageList.splice(i, 1)
           }
         }
+      },
+      getActorList(){
+          
+          actorList({pageSize:8}).then(res =>{
+              if(res.code == 0){
+                  this.dataImageList.push(...res.result.records)
+              }
+          })
       }
     },
     data: function () {

+ 4 - 2
src/views/template/userorientation/modules/transferCity.vue

@@ -243,8 +243,10 @@ export default {
       if (this.checkMatched.indexOf(item.value) == -1) {
         var index = this.checkData.findIndex(v => v.value === item.value)
         this.checkData.splice(index, 1)
-        if (this.nowProvince.value == item.value) {
-          this.checkMatchedCity = []
+        if (this.nowProvince) {
+          if (this.nowProvince.value == item.value) {
+            this.checkMatchedCity = []
+          }
         }
         this.checkAll = false
       } else {