zory vor 3 Wochen
Ursprung
Commit
11c569ff8c

+ 22 - 0
src/api/model/cloth.js

@@ -0,0 +1,22 @@
+import config from "@/config";
+import http from "@/utils/request";
+
+export default {
+    color: {
+        url: `${config.API_URL}/cloth/color`,
+        name: "-",
+        get: async function (data = {}) {
+            return await http.get(this.url, data);
+        },
+        post: async function (data = {}) {
+            return await http.post(this.url, data);
+        },
+    },
+    del: {
+        url: `${config.API_URL}/cloth/del`,
+        name: "-",
+        post: async function (data = {}) {
+            return await http.post(this.url, data);
+        },
+    },
+};

+ 1 - 1
src/api/model/common.js

@@ -3,7 +3,7 @@ import http from "@/utils/request"
 
 export default {
 	upload: {
-		url: `${config.API_URL}/upload`,
+		url: `${config.API_URL}/upload/data`,
 		name: "文件上传",
 		post: async function(data, config={}){
 			return await http.post(this.url, data, config);

+ 79 - 0
src/views/manage/general/brand/components/form.vue

@@ -0,0 +1,79 @@
+<template>
+    <el-dialog :title="titleMap[mode]" v-model="visible" :width="500" destroy-on-close @closed="$emit('closed')">
+        <el-form :model="formData" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-position="top" label-width="120px">
+            <el-form-item label="名称" prop="name">
+				<el-input v-model="formData.name" clearable></el-input>
+			</el-form-item>
+            <el-form-item label="首字母" prop="letter">
+				<el-input v-model="formData.letter" clearable></el-input>
+			</el-form-item>
+        </el-form>
+		<template #footer>
+			<el-button @click="visible=false" >取 消</el-button>
+			<el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
+		</template>
+    </el-dialog>
+</template>
+<script>
+export default{
+    data(){
+        return {
+            loading: false,
+            mode:"edit",
+            titleMap:{
+                add:"新增预设项",
+                edit:"编辑预设项"
+            },
+            visible: false,
+            isSaveing: false,
+            formData:{},
+            rules:{
+                name: [
+                    {required: true, message: '请输入颜色名称'}
+                ]
+            }
+        }
+    },
+    methods:{
+        // 显示
+        open(mode = 'add'){
+            this.mode = mode;
+            this.visible = true;
+            this.isSaveing = false;
+            return this;
+        },
+        //表单注入数据
+        setData(index,data,type){
+            this.formData = data;
+            this.formData.num = index;
+            this.formData.type = type;
+            this.loading = true;
+        },
+        /**
+         * 提交
+         */
+        submit(){
+            const { formData, $message } = this;
+            this.isSaveing = true;
+            this.$refs.dialogForm.validate(async (valid) => {
+                if (valid) {
+                    var result = await this.$API.cloth.color.post(formData);
+                    if(result.code !== 1){
+                        $message.warning(result.msg)
+                        this.isSaveing = false;
+                        return ;
+                    }
+                    this.isSaveing = false;
+                    this.formData = {};
+                    this.$emit('success')
+                    this.visible = false;
+                    $message.success("操作成功")
+                } else {
+                    this.isSaveing = false;
+                    return false;
+                }
+            })
+        }
+    }
+}
+</script>

+ 99 - 0
src/views/manage/general/brand/index.vue

@@ -0,0 +1,99 @@
+<template>
+    <el-container class="flex-column">
+        <div class="table-search-menu">
+            <div class="menu-left">衣物品牌</div>
+            <div class="menu-right">
+                <el-button type="default" icon="el-icon-plus" @click="table_add()">新增衣物品牌</el-button>
+            </div>
+        </div>
+        <el-main>
+            <div v-if="list.length == 0">
+                <el-empty description="暂无数据" :image-size="100"></el-empty>
+            </div>
+            <el-row :gutter="15" v-else>
+                <el-col :xl="3" :sm="6" :xs="24" v-for="(item,index) in list" :key="index">
+                    <el-card shadow="hover" :body-style="{ padding: '0px' }">
+                        <div class="code-item">
+                            <div class="title">
+                                <h2>{{item.name}} <el-tag v-if="item.letter">{{ item.letter }}</el-tag></h2>
+                                <p><el-button type="primary" size="small" @click="table_edit(item,index)">编辑</el-button>
+                                    <el-button icon="el-icon-delete" plain size="small" type="danger" @click="del(index)"></el-button>
+                                </p>
+                            </div>
+                        </div>
+
+                    </el-card>
+                </el-col>
+            </el-row>
+        </el-main>
+    </el-container>
+    <editForm ref="editForm" @success="hanldeSuccess"></editForm>
+</template>
+
+<script>
+import editForm from "./components/form";
+export default {
+    components: {
+        editForm
+    },
+    data(){
+        return {
+            list: [],
+            maxNum:0
+        }
+    },
+    created(){
+        this.getList()
+    },
+    methods: {
+        async del(data){
+            var confirm = await this.$confirm('确认删除吗?','提示', {
+                type: 'warning',
+                confirmButtonText: '删除',
+                confirmButtonClass: 'el-button--danger'
+            }).catch(() => {})
+            if(confirm != 'confirm'){
+                return false
+            }
+            var resp = await this.$API.cloth.del.post({id:data,"type":"brand"});
+            if (resp.code == 0) {
+                return this.$message.error(resp.msg)
+            }
+            this.$message.success(resp.msg);
+            this.getList();
+        },
+        hanldeSuccess(){
+            this.getList()
+        },
+        async getList(){
+            var resp = await this.$API.cloth.color.get({"type":"brand"});
+            if (resp.code == 0) {
+                return this.$message.warning(resp.msg)
+            }
+            this.list = resp.data.data;
+            this.maxNum = resp.data.num;
+        },
+        table_add() {
+            this.$nextTick(() => {
+                this.$refs.editForm.open().setData(this.maxNum,{},"brand")
+            })
+        },
+        table_edit(data,index) {
+            this.$nextTick(() => {
+                this.$refs.editForm.open('edit').setData(index,data,"brand")
+            })
+        }
+    }
+}
+</script>
+
+<style scoped>
+	.el-card {margin-bottom: 15px;}
+	.code-item {cursor: pointer;}
+	.code-item .img {width: 100%;height: 150px;background: #09f;display:flex;align-items: center;justify-content: center;background-repeat: no-repeat;background-size: cover;}
+	.code-item .img i {font-size: 100px;color: #fff;background-image: -webkit-linear-gradient(top left, #fff, #09f 100px);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
+	.code-item .title {padding:15px;}
+	.code-item .title h2 {font-size: 16px;}
+	.code-item .title h4 {font-size: 12px;color: #999;font-weight: normal;margin-top: 5px;}
+	.code-item .title p {margin-top: 15px;}
+</style>

+ 83 - 0
src/views/manage/general/color/components/form.vue

@@ -0,0 +1,83 @@
+<template>
+    <el-dialog :title="titleMap[mode]" v-model="visible" :width="500" destroy-on-close @closed="$emit('closed')">
+        <el-form :model="formData" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-position="top" label-width="120px">
+            <el-form-item label="颜色名称" prop="name">
+				<el-input v-model="formData.name" clearable></el-input>
+			</el-form-item>
+            <el-form-item label="颜色图片" prop="img">
+                <sc-upload v-model="formData.img"></sc-upload>
+				<!-- <el-input v-model="formData.img" clearable></el-input> -->
+            </el-form-item>
+        </el-form>
+		<template #footer>
+			<el-button @click="visible=false" >取 消</el-button>
+			<el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
+		</template>
+    </el-dialog>
+</template>
+<script>
+export default{
+    data(){
+        return {
+            loading: false,
+            mode:"edit",
+            titleMap:{
+                add:"新增颜色",
+                edit:"编辑颜色"
+            },
+            visible: false,
+            isSaveing: false,
+            formData:{},
+            rules:{
+                name: [
+                    {required: true, message: '请输入颜色名称'}
+                ],
+                img: [
+                    { required: true, message: '请选择', trigger:"change" }
+                ],
+            }
+        }
+    },
+    methods:{
+        // 显示
+        open(mode = 'add'){
+            this.mode = mode;
+            this.visible = true;
+            this.isSaveing = false;
+            return this;
+        },
+        //表单注入数据
+        setData(index,data,type){
+            this.formData = data;
+            this.formData.num = index;
+            this.formData.type = type;
+            this.loading = true;
+        },
+        /**
+         * 提交
+         */
+        submit(){
+            const { formData, $message } = this;
+            this.isSaveing = true;
+            this.$refs.dialogForm.validate(async (valid) => {
+                if (valid) {
+                    var result = await this.$API.cloth.color.post(formData);
+                    if(result.code !== 1){
+                        $message.warning(result.msg)
+                        this.isSaveing = false;
+                        return ;
+                    }
+                    this.isSaveing = false;
+                    this.formData = {};
+                    this.$emit('success')
+                    this.visible = false;
+                    $message.success("操作成功")
+                } else {
+                    this.isSaveing = false;
+                    return false;
+                }
+            })
+        }
+    }
+}
+</script>

+ 110 - 0
src/views/manage/general/color/index.vue

@@ -0,0 +1,110 @@
+<template>
+    <el-container class="flex-column">
+        <div class="table-search-menu">
+            <div class="menu-left">颜色管理</div>
+            <div class="menu-right">
+                <el-button type="default" icon="el-icon-plus" @click="table_add()">新增颜色</el-button>
+            </div>
+        </div>
+        <el-main>
+            <div v-if="list.length == 0">
+                <el-empty description="暂无数据" :image-size="100"></el-empty>
+            </div>
+            <el-row :gutter="15" v-else>
+                <el-col :xl="3" :sm="6" :xs="24" v-for="(item,index) in list" :key="index">
+                    <el-card shadow="hover" :body-style="{ padding: '0px' }">
+                        <div class="code-item">
+                            <div class="img">
+                                <el-image
+                                style="width: 100%; height: 150px"
+                                :src="item.img"
+                                :zoom-rate="1.2"
+                                :max-scale="7"
+                                :min-scale="0.2"
+                                :preview-src-list="[item.img]"
+                                :initial-index="4"
+                                fit="fill"
+                                />
+                            </div>
+                            <div class="title">
+                                <h2>{{item.name}}</h2>
+                                <p><el-button type="primary" size="small" @click="table_edit(item,index)">编辑</el-button>
+                                    <el-button icon="el-icon-delete" plain size="small" type="danger" @click="del(index)"></el-button></p>
+                            </div>
+                        </div>
+
+                    </el-card>
+                </el-col>
+            </el-row>
+        </el-main>
+    </el-container>
+    <editForm ref="editForm" @success="hanldeSuccess"></editForm>
+</template>
+
+<script>
+import editForm from "./components/form";
+export default {
+    components: {
+        editForm
+    },
+    data(){
+        return {
+            list: [],
+            maxNum:0
+        }
+    },
+    created(){
+        this.getList()
+    },
+    methods: {
+        async del(data){
+            var confirm = await this.$confirm('确认删除吗?','提示', {
+                type: 'warning',
+                confirmButtonText: '删除',
+                confirmButtonClass: 'el-button--danger'
+            }).catch(() => {})
+            if(confirm != 'confirm'){
+                return false
+            }
+            var resp = await this.$API.cloth.del.post({id:data,"type":"color"});
+            if (resp.code == 0) {
+                return this.$message.error(resp.msg)
+            }
+            this.$message.success(resp.msg);
+            this.getList();
+        },
+        hanldeSuccess(){
+            this.getList()
+        },
+        async getList(){
+            var resp = await this.$API.cloth.color.get({"type":"color"});
+            if (resp.code == 0) {
+                return this.$message.warning(resp.msg)
+            }
+            this.list = resp.data.data;
+            this.maxNum = resp.data.num;
+        },
+        table_add() {
+            this.$nextTick(() => {
+                this.$refs.editForm.open().setData(this.maxNum,{},"color")
+            })
+        },
+        table_edit(data,index) {
+            this.$nextTick(() => {
+                this.$refs.editForm.open('edit').setData(index,data,"color")
+            })
+        }
+    }
+}
+</script>
+
+<style scoped>
+	.el-card {margin-bottom: 15px;}
+	.code-item {cursor: pointer;}
+	.code-item .img {width: 100%;height: 150px;background: #09f;display:flex;align-items: center;justify-content: center;background-repeat: no-repeat;background-size: cover;}
+	.code-item .img i {font-size: 100px;color: #fff;background-image: -webkit-linear-gradient(top left, #fff, #09f 100px);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
+	.code-item .title {padding:15px;}
+	.code-item .title h2 {font-size: 16px;}
+	.code-item .title h4 {font-size: 12px;color: #999;font-weight: normal;margin-top: 5px;}
+	.code-item .title p {margin-top: 15px;}
+</style>

+ 76 - 0
src/views/manage/general/defect/components/form.vue

@@ -0,0 +1,76 @@
+<template>
+    <el-dialog :title="titleMap[mode]" v-model="visible" :width="500" destroy-on-close @closed="$emit('closed')">
+        <el-form :model="formData" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-position="top" label-width="120px">
+            <el-form-item label="名称" prop="name">
+				<el-input v-model="formData.name" clearable></el-input>
+			</el-form-item>
+        </el-form>
+		<template #footer>
+			<el-button @click="visible=false" >取 消</el-button>
+			<el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
+		</template>
+    </el-dialog>
+</template>
+<script>
+export default{
+    data(){
+        return {
+            loading: false,
+            mode:"edit",
+            titleMap:{
+                add:"新增预设项",
+                edit:"编辑预设项"
+            },
+            visible: false,
+            isSaveing: false,
+            formData:{},
+            rules:{
+                name: [
+                    {required: true, message: '请输入名称'}
+                ]
+            }
+        }
+    },
+    methods:{
+        // 显示
+        open(mode = 'add'){
+            this.mode = mode;
+            this.visible = true;
+            this.isSaveing = false;
+            return this;
+        },
+        //表单注入数据
+        setData(index,data,type){
+            this.formData = data;
+            this.formData.num = index;
+            this.formData.type = type;
+            this.loading = true;
+        },
+        /**
+         * 提交
+         */
+        submit(){
+            const { formData, $message } = this;
+            this.isSaveing = true;
+            this.$refs.dialogForm.validate(async (valid) => {
+                if (valid) {
+                    var result = await this.$API.cloth.color.post(formData);
+                    if(result.code !== 1){
+                        $message.warning(result.msg)
+                        this.isSaveing = false;
+                        return ;
+                    }
+                    this.isSaveing = false;
+                    this.formData = {};
+                    this.$emit('success')
+                    this.visible = false;
+                    $message.success("操作成功")
+                } else {
+                    this.isSaveing = false;
+                    return false;
+                }
+            })
+        }
+    }
+}
+</script>

+ 97 - 0
src/views/manage/general/defect/index.vue

@@ -0,0 +1,97 @@
+<template>
+    <el-container class="flex-column">
+        <div class="table-search-menu">
+            <div class="menu-left">瑕疵预设</div>
+            <div class="menu-right">
+                <el-button type="default" icon="el-icon-plus" @click="table_add()">新增瑕疵说明</el-button>
+            </div>
+        </div>
+        <el-main>
+            <div v-if="list.length == 0">
+                <el-empty description="暂无数据" :image-size="100"></el-empty>
+            </div>
+            <el-row :gutter="15" v-else>
+                <el-col :xl="3" :sm="6" :xs="24" v-for="(item,index) in list" :key="index">
+                    <el-card shadow="hover" :body-style="{ padding: '0px' }">
+                        <div class="code-item">
+                            <div class="title">
+                                <h2>{{item.name}}</h2>
+                                <p><el-button type="primary" size="small" @click="table_edit(item,index)">编辑</el-button><el-button icon="el-icon-delete" plain size="small" type="danger" @click="del(index)"></el-button></p>
+                            </div>
+                        </div>
+
+                    </el-card>
+                </el-col>
+            </el-row>
+        </el-main>
+    </el-container>
+    <editForm ref="editForm" @success="hanldeSuccess"></editForm>
+</template>
+
+<script>
+import editForm from "./components/form";
+export default {
+    components: {
+        editForm
+    },
+    data(){
+        return {
+            list: [],
+            maxNum:0
+        }
+    },
+    created(){
+        this.getList()
+    },
+    methods: {
+        async del(data){
+            var confirm = await this.$confirm('确认删除吗?','提示', {
+                type: 'warning',
+                confirmButtonText: '删除',
+                confirmButtonClass: 'el-button--danger'
+            }).catch(() => {})
+            if(confirm != 'confirm'){
+                return false
+            }
+            var resp = await this.$API.cloth.del.post({id:data,"type":"defect"});
+            if (resp.code == 0) {
+                return this.$message.error(resp.msg)
+            }
+            this.$message.success(resp.msg);
+            this.getList();
+        },
+        hanldeSuccess(){
+            this.getList()
+        },
+        async getList(){
+            var resp = await this.$API.cloth.color.get({"type":"defect"});
+            if (resp.code == 0) {
+                return this.$message.warning(resp.msg)
+            }
+            this.list = resp.data.data;
+            this.maxNum = resp.data.num;
+        },
+        table_add() {
+            this.$nextTick(() => {
+                this.$refs.editForm.open().setData(this.maxNum,{},"defect")
+            })
+        },
+        table_edit(data,index) {
+            this.$nextTick(() => {
+                this.$refs.editForm.open('edit').setData(index,data,"defect")
+            })
+        }
+    }
+}
+</script>
+
+<style scoped>
+	.el-card {margin-bottom: 15px;}
+	.code-item {cursor: pointer;}
+	.code-item .img {width: 100%;height: 150px;background: #09f;display:flex;align-items: center;justify-content: center;background-repeat: no-repeat;background-size: cover;}
+	.code-item .img i {font-size: 100px;color: #fff;background-image: -webkit-linear-gradient(top left, #fff, #09f 100px);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
+	.code-item .title {padding:15px;}
+	.code-item .title h2 {font-size: 16px;}
+	.code-item .title h4 {font-size: 12px;color: #999;font-weight: normal;margin-top: 5px;}
+	.code-item .title p {margin-top: 15px;}
+</style>

+ 97 - 0
src/views/manage/general/ornament/index.vue

@@ -0,0 +1,97 @@
+<template>
+    <el-container class="flex-column">
+        <div class="table-search-menu">
+            <div class="menu-left">配饰/附件</div>
+            <div class="menu-right">
+                <el-button type="default" icon="el-icon-plus" @click="table_add()">新增配饰/附件</el-button>
+            </div>
+        </div>
+        <el-main>
+            <div v-if="list.length == 0">
+                <el-empty description="暂无数据" :image-size="100"></el-empty>
+            </div>
+            <el-row :gutter="15" v-else>
+                <el-col :xl="3" :sm="6" :xs="24" v-for="(item,index) in list" :key="index">
+                    <el-card shadow="hover" :body-style="{ padding: '0px' }">
+                        <div class="code-item">
+                            <div class="title">
+                                <h2>{{item.name}}</h2>
+                                <p><el-button type="primary" size="small" @click="table_edit(item,index)">编辑</el-button><el-button icon="el-icon-delete" plain size="small" type="danger" @click="del(index)"></el-button></p>
+                            </div>
+                        </div>
+
+                    </el-card>
+                </el-col>
+            </el-row>
+        </el-main>
+    </el-container>
+    <editForm ref="editForm" @success="hanldeSuccess"></editForm>
+</template>
+
+<script>
+import editForm from "../defect/components/form";
+export default {
+    components: {
+        editForm
+    },
+    data(){
+        return {
+            list: [],
+            maxNum:0
+        }
+    },
+    created(){
+        this.getList()
+    },
+    methods: {
+        async del(data){
+            var confirm = await this.$confirm('确认删除吗?','提示', {
+                type: 'warning',
+                confirmButtonText: '删除',
+                confirmButtonClass: 'el-button--danger'
+            }).catch(() => {})
+            if(confirm != 'confirm'){
+                return false
+            }
+            var resp = await this.$API.cloth.del.post({id:data,"type":"ornament"});
+            if (resp.code == 0) {
+                return this.$message.error(resp.msg)
+            }
+            this.$message.success(resp.msg);
+            this.getList();
+        },
+        hanldeSuccess(){
+            this.getList()
+        },
+        async getList(){
+            var resp = await this.$API.cloth.color.get({"type":"ornament"});
+            if (resp.code == 0) {
+                return this.$message.warning(resp.msg)
+            }
+            this.list = resp.data.data;
+            this.maxNum = resp.data.num;
+        },
+        table_add() {
+            this.$nextTick(() => {
+                this.$refs.editForm.open().setData(this.maxNum,{},"ornament")
+            })
+        },
+        table_edit(data,index) {
+            this.$nextTick(() => {
+                this.$refs.editForm.open('edit').setData(index,data,"ornament")
+            })
+        }
+    }
+}
+</script>
+
+<style scoped>
+	.el-card {margin-bottom: 15px;}
+	.code-item {cursor: pointer;}
+	.code-item .img {width: 100%;height: 150px;background: #09f;display:flex;align-items: center;justify-content: center;background-repeat: no-repeat;background-size: cover;}
+	.code-item .img i {font-size: 100px;color: #fff;background-image: -webkit-linear-gradient(top left, #fff, #09f 100px);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
+	.code-item .title {padding:15px;}
+	.code-item .title h2 {font-size: 16px;}
+	.code-item .title h4 {font-size: 12px;color: #999;font-weight: normal;margin-top: 5px;}
+	.code-item .title p {margin-top: 15px;}
+</style>

+ 97 - 0
src/views/manage/general/risk/index.vue

@@ -0,0 +1,97 @@
+<template>
+    <el-container class="flex-column">
+        <div class="table-search-menu">
+            <div class="menu-left">洗涤风险</div>
+            <div class="menu-right">
+                <el-button type="default" icon="el-icon-plus" @click="table_add()">新增洗涤风险项</el-button>
+            </div>
+        </div>
+        <el-main>
+            <div v-if="list.length == 0">
+                <el-empty description="暂无数据" :image-size="100"></el-empty>
+            </div>
+            <el-row :gutter="15" v-else>
+                <el-col :xl="3" :sm="6" :xs="24" v-for="(item,index) in list" :key="index">
+                    <el-card shadow="hover" :body-style="{ padding: '0px' }">
+                        <div class="code-item">
+                            <div class="title">
+                                <h2>{{item.name}}</h2>
+                                <p><el-button type="primary" size="small" @click="table_edit(item,index)">编辑</el-button><el-button icon="el-icon-delete" plain size="small" type="danger" @click="del(index)"></el-button></p>
+                            </div>
+                        </div>
+
+                    </el-card>
+                </el-col>
+            </el-row>
+        </el-main>
+    </el-container>
+    <editForm ref="editForm" @success="hanldeSuccess"></editForm>
+</template>
+
+<script>
+import editForm from "../defect/components/form";
+export default {
+    components: {
+        editForm
+    },
+    data(){
+        return {
+            list: [],
+            maxNum:0
+        }
+    },
+    created(){
+        this.getList()
+    },
+    methods: {
+        async del(data){
+            var confirm = await this.$confirm('确认删除吗?','提示', {
+                type: 'warning',
+                confirmButtonText: '删除',
+                confirmButtonClass: 'el-button--danger'
+            }).catch(() => {})
+            if(confirm != 'confirm'){
+                return false
+            }
+            var resp = await this.$API.cloth.del.post({id:data,"type":"risk"});
+            if (resp.code == 0) {
+                return this.$message.error(resp.msg)
+            }
+            this.$message.success(resp.msg);
+            this.getList();
+        },
+        hanldeSuccess(){
+            this.getList()
+        },
+        async getList(){
+            var resp = await this.$API.cloth.color.get({"type":"risk"});
+            if (resp.code == 0) {
+                return this.$message.warning(resp.msg)
+            }
+            this.list = resp.data.data;
+            this.maxNum = resp.data.num;
+        },
+        table_add() {
+            this.$nextTick(() => {
+                this.$refs.editForm.open().setData(this.maxNum,{},"risk")
+            })
+        },
+        table_edit(data,index) {
+            this.$nextTick(() => {
+                this.$refs.editForm.open('edit').setData(index,data,"risk")
+            })
+        }
+    }
+}
+</script>
+
+<style scoped>
+	.el-card {margin-bottom: 15px;}
+	.code-item {cursor: pointer;}
+	.code-item .img {width: 100%;height: 150px;background: #09f;display:flex;align-items: center;justify-content: center;background-repeat: no-repeat;background-size: cover;}
+	.code-item .img i {font-size: 100px;color: #fff;background-image: -webkit-linear-gradient(top left, #fff, #09f 100px);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
+	.code-item .title {padding:15px;}
+	.code-item .title h2 {font-size: 16px;}
+	.code-item .title h4 {font-size: 12px;color: #999;font-weight: normal;margin-top: 5px;}
+	.code-item .title p {margin-top: 15px;}
+</style>