Browse Source

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

zhuxinbo 5 years ago
parent
commit
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>
 <template>
   <div :class="[type === 'horizantal' ? 'vm-card-horizantal' : 'vm-card-vertical' , 'vm-panel']">
   <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">
       <div v-if="editable && type == 'vertical'" class="control">
         <span class="edit">
         <span class="edit">
           <a :href="editUrl">
           <a :href="editUrl">
@@ -56,7 +56,9 @@
       }
       }
     },
     },
     data: function () {
     data: function () {
-
+        return {
+            to:null
+        }
     },
     },
     methods: {
     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>
 <template>
   <div class="vm-image-list">
   <div class="vm-image-list">
     <a-row class="image-list-heading vm-panel">
     <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">
       <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>
           <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>
         </div>
         <a-row type="flex" align="middle" class="page">
         <a-row type="flex" align="middle" class="page">
           <span>第</span>
           <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="margin-end">/ 页</span>
           <span class="total">总共 {{ data.length }}条</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>
     </a-row>
     </a-row>
     <a-row class="image-list" :gutter="16">
     <a-row class="image-list" :gutter="16">
       <a-col :lg="6" :sm="12" class="vm-margin" v-for="item in dataShow" :key="item.id">
       <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-col>
     </a-row>
     </a-row>
   </div>
   </div>
 </template>
 </template>
 
 
 <script>
 <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>
 </script>

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

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

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

@@ -243,8 +243,10 @@ export default {
       if (this.checkMatched.indexOf(item.value) == -1) {
       if (this.checkMatched.indexOf(item.value) == -1) {
         var index = this.checkData.findIndex(v => v.value === item.value)
         var index = this.checkData.findIndex(v => v.value === item.value)
         this.checkData.splice(index, 1)
         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
         this.checkAll = false
       } else {
       } else {