图库修改样式

src/views/product/components/addImages.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-if="dialogVisible">
+    <div  >
         <el-dialog title="选择图片" :visible.sync="dialogVisible" width="1000px">
             <el-container>
                 <el-aside style="background-color: #fff;" width="150px">
@@ -16,15 +16,16 @@
                     <imageComponent @onSelectImage="onSelectImage" @getList="getList" :activedata="activedata"
                         :list='dataImages'>
                     </imageComponent>
-                    <el-pagination style="position: absolute;right: 60px;" layout="prev, pager, next ,jumper" background :total="total" :page-size="pageSize"
+                    <mypagination :total="total" @gopageEvent="handleCurrentChange"></mypagination>
+                    <!-- <el-pagination style="position: absolute;right: 60px;" layout="prev, pager, next ,jumper" background :total="total" :page-size="pageSize"
                         @current-change="handleCurrentChange">
-                    </el-pagination>
+                    </el-pagination> -->
                 </el-main>
             </el-container>
-            <span slot="footer" class="dialog-footer">
+            <div  style="text-align: center">
+                <el-button type="success" @click="sumbit">确 定</el-button>
                 <el-button @click="dialogVisible = false">取 消</el-button>
-                <el-button type="primary" @click="sumbit">确 定</el-button>
+            </div>
-            </span>
         </el-dialog>
 
         <!-- <el-select v-model="value" placeholder="请选择" @change="changeEvent">
@@ -72,12 +73,13 @@ import { getcommonCategor, getcommonpicture, storeAddcategory, addImg, delcate }
 import { mapGetters } from "vuex";
 import { getToken } from "@/utils/auth";
 import imageComponent from './imageComponent.vue'
+import mypagination from './mypagination'
 export default {
     computed: {
         ...mapGetters(["qiNiuUploadApi"])
     },
     components: {
-        imageComponent
+        imageComponent,mypagination
     },
     data() {
         return {
@@ -96,7 +98,7 @@ export default {
             showUpload: false,
             page: 1,
             total: 0,
-            pageSize: 18,
+            // pageSize: 18,
             activedata: '681'
         }
     },
@@ -108,12 +110,12 @@ export default {
             this.activedata = -1
             this.page = 1
             this.dataImages = []
-            this.pageSize = 17
+            // this.pageSize = 17
             this.getList()
         },
         changeEvent(id) {
             this.page = 1
-            this.pageSize = 18
+            // this.pageSize = 18
             this.activedata = id
             this.getList()
         },
@@ -197,7 +199,7 @@ export default {
             let obj = {
                 category: this.activedata == -1 ? '' : this.activedata,
                 page: this.page,
-                size: this.activedata == -1 ? 17 : 18,
+                size: 18,
                 store_id: localStorage.getItem("shopId"),
             }
             const res = await getcommonpicture(obj);
@@ -221,6 +223,7 @@ export default {
 <style scoped>
 .activedata {
     color: #1890ff;
+    /* background-color: #f6f7f8; */
 }
 
 .uplocation {

src/views/product/components/imageComponent.vue

@@ -1,12 +1,18 @@
 <template>
-    <div>
+    <div style="">
-        <ul class="ulStyle" :class="[activedata == -1?'':'heightStyle']">
+        <div style="text-align: right;" v-if="activedata == -1">
-            <li class="upImgStyles" @click="showUpload = true" v-if="activedata == -1">
+            <span style="color: #aaa;">只能上传png、jgp图片</span>
+            <el-button @click="showUpload = true" style="background-color: #f6f7f8;">上传文件</el-button>
+        </div>
+
+        <ul class="ulStyle" :class="[activedata == -1 ? '' : 'heightStyle']">
+            <!-- <li class="upImgStyles" @click="showUpload = true" v-if="activedata == -1">
                 +
-            </li>
+            </li> -->
             <li v-for="item in list" :key="item.id" class="listyle" :class="[selectList.id == item.id ? 'actives' : '']"
                 @click="clickEvent(item)">
                 <img :src="item.url" style="width: 100px;height: 100px;" alt="">
+                <!-- {{ item.name.substring(0, 6) }} -->
             </li>
         </ul>
         <template v-if="showUpload">
@@ -138,10 +144,11 @@ li {
     display: flex;
     flex-wrap: wrap;
     overflow: auto;
-
+    height: 402px;
 }
-.heightStyle{
+
-    height: 400px;
+.heightStyle {
+    height: 402px;
 }
 
 
@@ -152,6 +159,7 @@ li {
     margin-top: 10px;
     border: 5px solid #fff;
     position: relative;
+    text-align: center;
 }
 
 .listyle:last-child {

src/views/product/components/mypagination.vue

@@ -0,0 +1,79 @@
+<template>
+    <div class="mypagination">
+        <i class="el-icon-arrow-left istyle" @click="minuspage" v-show="pgae != 1"></i>
+        <div>
+            <span style="color: #42d885;">
+                {{ pgae }}
+            </span> / {{ totals }}
+        </div>
+        <i class="el-icon-arrow-right istyle" @click="gopage" v-if="pgae != totals"></i>
+        <div style="width: 26px;" v-else></div>
+        <el-input v-model='pagego' class="inputStyle" @input="oninputEvent" />
+        <el-button type="text" @click="gopages">跳转</el-button>
+
+    </div>
+</template>
+<script>
+
+export default {
+    props: ['total'],
+
+    watch: {
+        totals() {
+            this.pgae = 1
+            this.pagego = 1
+        }
+    },
+    computed: {
+        totals() {
+            let pagedata = this.total / 18
+            return pagedata < 0 ? 1 : Math.ceil(pagedata)
+        }
+    },
+    data() {
+        return { pgae: 1, pagego: 1 }
+    },
+    methods: {
+        oninputEvent(d) {
+            let a = d.replace(/[^\d]/g, '')
+            if (a < (this.totals + 1)) {
+                this.pagego = a
+            } else {
+                this.pagego = this.totals
+            }
+        },
+        gopage() {
+            this.$emit('gopageEvent', ++this.pgae)
+            this.pagego = this.pgae
+        },
+        minuspage() {
+            this.$emit('gopageEvent', --this.pgae)
+            this.pagego = this.pgae
+        },
+        gopages() {
+            this.pgae = this.pagego
+            this.$emit('gopageEvent', this.pagego)
+        }
+    }
+}
+</script>
+<style scoped>
+.mypagination {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end
+}
+
+.istyle {
+    background-color: #f6f7f8;
+    width: 26px;
+    height: 26px;
+    line-height: 26px;
+    text-align: center;
+}
+
+.inputStyle {
+    width: 50px;
+    margin-right: 10px;
+}
+</style>

src/views/shop/notifications/index.vue

@@ -0,0 +1,13 @@
+<template>
+    <div class="notifications">
+        123
+    </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return {}
+    }
+}
+</script>