|
@@ -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>
|