Skip to content

E
electron-printer
Commit 0834896a by 朱哲铨
Options

添加less

parent 165fd6cb
Showing with 415 additions and 570 deletions
package-lock.json
{ {
"name": "vue-exectron-express-lowdb", "name": "JomallProductionAssistant",
"version": "0.1.0", "version": "0.1.0",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
...@@ -9248,6 +9248,13 @@ ...@@ -9248,6 +9248,13 @@
} }
} }
}, },
"image-size": {
"version": "0.5.5",
"resolved": "https://registry.npmmirror.com/image-size/-/image-size-0.5.5.tgz",
"integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==",
"dev": true,
"optional": true
},
"immediate": { "immediate": {
"version": "3.0.6", "version": "3.0.6",
"resolved": "https://registry.npmmirror.com/immediate/-/immediate-3.0.6.tgz", "resolved": "https://registry.npmmirror.com/immediate/-/immediate-3.0.6.tgz",
...@@ -10182,6 +10189,12 @@ ...@@ -10182,6 +10189,12 @@
"graceful-fs": "^4.1.9" "graceful-fs": "^4.1.9"
} }
}, },
"klona": {
"version": "2.0.6",
"resolved": "https://registry.npmmirror.com/klona/-/klona-2.0.6.tgz",
"integrity": "sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==",
"dev": true
},
"latest-version": { "latest-version": {
"version": "5.1.0", "version": "5.1.0",
"resolved": "https://registry.npmmirror.com/latest-version/-/latest-version-5.1.0.tgz", "resolved": "https://registry.npmmirror.com/latest-version/-/latest-version-5.1.0.tgz",
...@@ -10239,6 +10252,46 @@ ...@@ -10239,6 +10252,46 @@
"invert-kv": "^1.0.0" "invert-kv": "^1.0.0"
} }
}, },
"less": {
"version": "3.5.0",
"resolved": "https://registry.npmmirror.com/less/-/less-3.5.0.tgz",
"integrity": "sha512-fLbJGxtoCV2FTDGeXlUXXUZ8sgMej2c5u8om8inOZt5M3tzXqF/aS7W0txWhCN6iA6qPtPGGzj0sp/vd8ztl6Q==",
"dev": true,
"requires": {
"errno": "^0.1.1",
"graceful-fs": "^4.1.2",
"image-size": "~0.5.0",
"mime": "^1.4.1",
"mkdirp": "^0.5.0",
"promise": "^7.1.1",
"request": "^2.83.0",
"source-map": "~0.6.0"
}
},
"less-loader": {
"version": "7.3.0",
"resolved": "https://registry.npmmirror.com/less-loader/-/less-loader-7.3.0.tgz",
"integrity": "sha512-Mi8915g7NMaLlgi77mgTTQvK022xKRQBIVDSyfl3ErTuBhmZBQab0mjeJjNNqGbdR+qrfTleKXqbGI4uEFavxg==",
"dev": true,
"requires": {
"klona": "^2.0.4",
"loader-utils": "^2.0.0",
"schema-utils": "^3.0.0"
},
"dependencies": {
"schema-utils": {
"version": "3.3.0",
"resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-3.3.0.tgz",
"integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
"dev": true,
"requires": {
"@types/json-schema": "^7.0.8",
"ajv": "^6.12.5",
"ajv-keywords": "^3.5.2"
}
}
}
},
"leven": { "leven": {
"version": "2.1.0", "version": "2.1.0",
"resolved": "https://registry.npmmirror.com/leven/-/leven-2.1.0.tgz", "resolved": "https://registry.npmmirror.com/leven/-/leven-2.1.0.tgz",
......
package.json
...@@ -58,6 +58,8 @@ ...@@ -58,6 +58,8 @@
"eslint": "^6.7.2", "eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.1.1", "eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-vue": "^6.1.2", "eslint-plugin-vue": "^6.1.2",
"less": "^3.5.0",
"less-loader": "^7.3.0",
"prettier": "^1.19.1", "prettier": "^1.19.1",
"pug": "^2.0.4", "pug": "^2.0.4",
"pug-html-loader": "^1.1.5", "pug-html-loader": "^1.1.5",
......
src/router/index.js
...@@ -20,14 +20,7 @@ const routes = [ ...@@ -20,14 +20,7 @@ const routes = [
}, },
component: resolve => require(["../views/design/index.vue"], resolve) component: resolve => require(["../views/design/index.vue"], resolve)
}, },
{
path: "/design-copy",
name: "design",
meta: {
title: "设计页面"
},
component: resolve => require(["../views/design/copy.vue"], resolve)
},
{ {
path: "/design-detail", path: "/design-detail",
name: "design", name: "design",
...@@ -48,7 +41,6 @@ const router = new VueRouter({ ...@@ -48,7 +41,6 @@ const router = new VueRouter({
routes routes
}); });
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
let user = Vue.prototype.$dataStore.get("user"); let user = Vue.prototype.$dataStore.get("user");
if (to.path.includes("design-detail")) { if (to.path.includes("design-detail")) {
return next(); return next();
...@@ -67,7 +59,6 @@ router.beforeEach((to, from, next) => { ...@@ -67,7 +59,6 @@ router.beforeEach((to, from, next) => {
} else { } else {
return next("/"); return next("/");
} }
} }
}); });
export default router; export default router;
src/views/design/copy.vue deleted 100644 → 0
<script>
import VueDragResizeRotate from "@minogin/vue-drag-resize-rotate";
export default {
components: {VueDragResizeRotate},
data() {
return {
selectIndex:0,
imgList:[
{
x:0,
url:'https://pic2.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg',
y:0,
zIndex:1,
h:100,
w:100,
r:0
},
{
x:0,
url:'https://ts1.cn.mm.bing.net/th/id/R-C.987f582c510be58755c4933cda68d525?rik=C0D21hJDYvXosw&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1305%2f16%2fc4%2f20990657_1368686545122.jpg&ehk=netN2qzcCVS4ALUQfDOwxAwFcy41oxC%2b0xTFvOYy5ds%3d&risl=&pid=ImgRaw&r=0',
y:0,
zIndex:2,
h:100,
w:100,
r:0
}
]
}
},
methods:{
resizing(x, y, w, h) {
this.$set(this.imgList[this.selectIndex], 'w', w)
this.$set(this.imgList[this.selectIndex], 'h', h)
this.$set(this.imgList[this.selectIndex], 'x', x)
this.$set(this.imgList[this.selectIndex], 'y', y)
},
onDragDebounce(data,item){
console.log(data,item)
this.imgList[this.selectIndex].x = left
this.imgList[this.selectIndex].y = top
},
},
mounted() {
}
}
</script>
<template>
<div class="page">
<vue-drag-resize-rotate
:w="item.w"
class-name="my-drag-resize-rotate"
:prevent-deactivation="true"
:h="item.h"
:parent="true"
:x="item.x"
:z="item.zIndex"
:isActive="index===selectIndex"
:aspectRatio="true"
:active="index===selectIndex"
:y="item.y"
v-for="(item,index) in imgList"
:key="index"
:draggable="true"
:resizable="true"
:rotatable="true"
@dragstop="(a)=>onDragDebounce(a,item)"
@resizing="resizing"
:angle="item.r"
>
<div ref="sucaitu-img" @click="selectItem(index)"
:class="{'active': index === selectIndex}"
class="sucaitu-img img element">
<img :src="item.url" alt="" class="sucaitu-img">
<i v-if="index===selectIndex" class=" close el-icon-close"></i>
<div v-if="index===selectIndex" class="control-point control-rotator"></div>
</div>
</vue-drag-resize-rotate>
</div>
</template>
<style scoped>
.sucaitu-img{
width: 100%;
height: 100%;
}
.sucaitu-img img{
width: 100%;
height: 100%;
}
.page {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
</style>
\ No newline at end of file
src/views/design/detail/index.vue
...@@ -570,119 +570,206 @@ export default { ...@@ -570,119 +570,206 @@ export default {
</template> </template>
<style scoped> <style lang="less" scoped>
::v-deep .el-dialog__body { ::v-deep {
box-sizing: border-box; .el-dialog__body {
flex: 1; box-sizing: border-box;
flex-shrink: 0; flex: 1;
overflow: hidden; flex-shrink: 0;
} overflow: hidden;
}
::v-deep .el-dialog { .el-dialog {
display: flex; display: flex;
height: calc(100% - 50px); height: calc(100% - 50px);
margin-top: 50px; margin-top: 50px;
flex-direction: column; flex-direction: column;
}
.el-carousel__container {
height: 100%;
}
.el-form-item__label {
font-weight: bold;
color: white;
}
.el-dialog__title {
font-weight: bold;
font-size: 37px;
color: black;
position: relative;
left: 47%;
top: 13px;
}
} }
.sure-btn { .sure-btn {
position: absolute; position: absolute;
right: 62px; right: 62px;
top: 14px; top: 14px;
} }
.detail-div { .detail-div {
display: flex; display: flex;
height: 100%; height: 100%;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
.detail-images {
.scroll-list {
background: #ececec;
display: flex;
height: 100px;
width: 100%;
padding: 5px;
.scroll-content {
margin-left: 10px;
overflow-x: auto;
overflow-y: hidden;
flex: 1;
display: flex;
flex-wrap: nowrap;
flex-shrink: 0;
.scroll-item {
height: 100%;
min-width: 100px;
background: white;
width: 80px;
margin-right: 5px;
}
}
.img-title {
display: flex;
flex-direction: column;
justify-content: center;
background: white;
padding: 10px;
b {
text-align: center;
color: black;
font-weight: bold;
font-size: 16px;
margin-bottom: 15px;
}
.id {
display: flex;
align-items: center;
padding: 3px 5px;
background: #ececec;
justify-content: center;
img {
width: 15px;
margin-right: 8px;
}
}
}
}
}
.detail-content {
display: flex;
width: 100%;
flex: 1;
margin-bottom: 10px;
flex-shrink: 0;
justify-content: space-between;
}
.right {
width: 710px;
height: 100%;
display: flex;
flex-direction: column;
.btn {
margin: 20px 0;
display: flex;
align-items: center;
justify-content: space-between;
height: 50px;
width: 100%;
}
.div-text {
.div-content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
padding: 15px 10px;
box-sizing: border-box;
position: relative;
border: 1px solid #ececec;
.div-item {
width: 50%;
margin-bottom: 10px;
font-size: 15px;
display: flex;
align-items: center;
p {
font-weight: 400;
color: black;
}
span {
display: inline-block;
text-align: right;
width: 100px;
&::after {
content: ':';
margin: 0 3px;
}
}
}
}
b {
position: relative;
background: white;
top: 9px;
left: 13px;
padding: 0 10px;
font-size: 18px;
color: black;
z-index: 3;
}
}
.input {
display: flex;
align-items: center;
margin: 30px 0;
}
}
.left {
flex: 1;
flex-shrink: 0;
margin-right: 20px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
.left-image {
display: flex;
height: 100%;
flex-direction: column;
justify-content: center;
img {
height: auto;
width: 100%;
max-height: 90%;
}
b {
color: black;
font-size: 18px;
margin-bottom: 15px;
}
}
.left-images {
display: flex;
width: 95%;
height: 100%;
flex-direction: column;
b {
color: black;
text-align: center;
margin-bottom: 15px;
}
}
}
} }
.detail-div .detail-images .scroll-list {
background: #ececec;
display: flex;
height: 100px;
width: 100%;
padding: 5px;
}
.detail-div .detail-images .scroll-list .scroll-content {
margin-left: 10px;
overflow-x: auto;
overflow-y: hidden;
flex: 1;
display: flex;
flex-wrap: nowrap;
flex-shrink: 0;
}
.detail-div .detail-images .scroll-list .scroll-content .scroll-item {
height: 100%;
min-width: 100px;
background: white;
width: 80px;
margin-right: 5px;
}
.detail-div .detail-images .scroll-list .img-title {
display: flex;
flex-direction: column;
justify-content: center;
background: white;
padding: 10px;
}
.detail-div .detail-images .scroll-list .img-title b {
text-align: center;
color: black;
font-weight: bold;
font-size: 16px;
margin-bottom: 15px;
}
.detail-div .detail-images .scroll-list .img-title .id {
display: flex;
align-items: center;
padding: 3px 5px;
background: #ececec;
justify-content: center;
}
.detail-div .detail-images .scroll-list .img-title .id img {
width: 15px;
margin-right: 8px;
}
.detail-div .detail-content {
display: flex;
width: 100%;
flex: 1;
margin-bottom: 10px;
flex-shrink: 0;
justify-content: space-between;
}
.detail-div .right {
width: 710px;
height: 100%;
display: flex;
flex-direction: column;
}
.detail-div .right .btn {
margin: 20px 0;
display: flex;
align-items: center;
justify-content: space-between;
height: 50px;
width: 100%;
}
.detail-div .right .btn .btn-sure, .detail-div .right .btn .btn-down { .detail-div .right .btn .btn-sure, .detail-div .right .btn .btn-down {
width: 100%; width: 100%;
position: relative; position: relative;
} }
.detail-div .right .btn .btn-sure .check, .detail-div .right .btn .btn-down .check { .detail-div .right .btn .btn-sure .check, .detail-div .right .btn .btn-down .check {
position: absolute; position: absolute;
width: 144px; width: 144px;
...@@ -694,149 +781,34 @@ export default { ...@@ -694,149 +781,34 @@ export default {
right: 0; right: 0;
top: 1px; top: 1px;
} }
.detail-div .right .div-text .div-content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
padding: 15px 10px;
box-sizing: border-box;
}
.detail-div .right .div-text .div-content .div-item {
width: 50%;
margin-bottom: 10px;
font-size: 15px;
display: flex;
align-items: center;
}
.detail-div .right .div-text .div-content .div-item p {
font-weight: 400;
color: black;
}
.detail-div .right .div-text .div-content .div-item span {
display: inline-block;
text-align: right;
width: 100px;
}
.detail-div .right .div-text .div-content .div-item span::after {
content: ':';
margin: 0 3px;
}
.detail-div .right .div-text b {
position: relative;
background: white;
top: 9px;
left: 13px;
padding: 0 10px;
font-size: 18px;
color: black;
z-index: 3;
}
.detail-div .right .div-text .div-content {
position: relative;
border: 1px solid #ececec;
}
.detail-div .right .input {
display: flex;
align-items: center;
margin: 30px 0;
}
.detail-div .left {
flex: 1;
flex-shrink: 0;
margin-right: 20px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.detail-div .left .left-image {
display: flex;
height: 100%;
flex-direction: column;
justify-content: center;
}
.detail-div .left .left-image img {
height: auto;
width: 100%;
max-height: 90%;
}
.detail-div .left .left-image b {
color: black;
font-size: 18px;
margin-bottom: 15px;
}
.detail-div .left .left-images {
display: flex;
width: 95%;
height: 100%;
flex-direction: column;
}
.detail-div .left .left-images b {
color: black;
text-align: center;
margin-bottom: 15px;
}
::v-deep .el-carousel__container {
height: 100%;
}
::v-deep .el-form-item__label {
font-weight: bold;
color: white;
}
::v-deep .el-dialog__title {
font-weight: bold;
font-size: 37px;
color: black;
position: relative;
left: 47%;
top: 13px;
}
.btn { .btn {
position: relative; position: relative;
.check {
::v-deep {
.el-checkbox__inner {
background-color: transparent !important;
border-color: white !important;
width: 12px;
height: 12px;
&::after {
left: 3px;
}
}
.el-checkbox__label {
padding-left: 5px;
font-size: 12px;
color: white !important;
}
}
}
} }
.page {
.btn .check ::v-deep .el-checkbox__inner {
background-color: transparent !important;
border-color: white !important;
width: 12px;
height: 12px;
}
.btn .check ::v-deep .el-checkbox__inner::after {
left: 3px;
}
.btn .check ::v-deep .el-checkbox__label {
padding-left: 5px;
font-size: 12px;
color: white !important;
}
.page{
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
p{ p {
margin: 0 ; margin: 0;
} }
</style> </style>
src/views/design/head/index.vue
...@@ -177,18 +177,14 @@ export default { ...@@ -177,18 +177,14 @@ export default {
} }
if (this.productionNo === "") return this.$message.warning("请录入生产单号"); if (this.productionNo === "") return this.$message.warning("请录入生产单号");
try { try {
//查找生产单号信息传给第二个显示器
const findByPodProductionNo = await this.$api.post("/findByPodProductionNo", { const findByPodProductionNo = await this.$api.post("/findByPodProductionNo", {
podProductionNo: this.productionNo, podProductionNo: this.productionNo,
status: "IN_PRODUCTION" status: "IN_PRODUCTION"
}); });
this.detail = findByPodProductionNo.data; this.detail = findByPodProductionNo.data;
ipcRenderer.send("win-subScreen", findByPodProductionNo.data); ipcRenderer.send("win-subScreen", findByPodProductionNo.data);
// 根据生产单号查找 素材图片 下载到本地 然后返回本地地址去显示
} catch (err) {
this.productionNo = "";
this.$refs.searchRef.focus();
}
try {
let res = await this.$api.post("/getPodProductionInfo", { productionNo: this.productionNo }); let res = await this.$api.post("/getPodProductionInfo", { productionNo: this.productionNo });
if (res.data.length === 0) return this.$message.warning("未找到素材图！"); if (res.data.length === 0) return this.$message.warning("未找到素材图！");
let arr = []; let arr = [];
...@@ -199,38 +195,22 @@ export default { ...@@ -199,38 +195,22 @@ export default {
arr.push({ arr.push({
...it, ...it,
...{ ...{
designId:el.designId designId: el.designId
} }
}); });
}); });
} }
}); });
console.log(arr,'arr'); console.log(arr, "arr");
res.data = arr.filter(el=>el.type!==1); res.data = arr.filter(el => el.type !== 1);
// for (let i = 0; i < res.data.length; i++) {
// this.$api.post("/getPngImg", { fileName: res.data[i].fileName }, {
// headers: {
// "responseType": "blob"
// }
// }).then(r => {
//
// res.data[i].file = new File([r], res.data[i].fileName, { type: "image/png" });
// if (i === res.data.length - 1) {
// this.imgList = res.data;
//
// }
// });
// }
bus.$emit("busEmit", { type: "sendFile", value: res.data }); bus.$emit("busEmit", { type: "sendFile", value: res.data });
this.productionNo = ""; this.productionNo = "";
this.$refs.searchRef.focus(); this.$refs.searchRef.focus();
} catch (err) { } catch (err) {
bus.$emit("busEmit", { type: "sendFile", value: [] });
this.productionNo = ""; this.productionNo = "";
this.$refs.searchRef.focus(); this.$refs.searchRef.focus();
} }
}, },
changeActionIndex(t) { changeActionIndex(t) {
let index = this.actionIndex; let index = this.actionIndex;
...@@ -436,7 +416,7 @@ export default { ...@@ -436,7 +416,7 @@ export default {
<el-dropdown @command="dropdownCommand"> <el-dropdown @command="dropdownCommand">
<b style="cursor:pointer;">{{ user.employeeName }}</b> <b style="cursor:pointer;">{{ user.employeeName }}</b>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<!-- <el-dropdown-item command="clear">清除缓存</el-dropdown-item>--> <!-- <el-dropdown-item command="clear">清除缓存</el-dropdown-item>-->
<el-dropdown-item command="company">切换系统</el-dropdown-item> <el-dropdown-item command="company">切换系统</el-dropdown-item>
<el-dropdown-item command="logout">退出登录</el-dropdown-item> <el-dropdown-item command="logout">退出登录</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
...@@ -448,42 +428,42 @@ export default { ...@@ -448,42 +428,42 @@ export default {
</div> </div>
</template> </template>
<style scoped> <style lang="less" scoped>
.right-user { .right-user {
display: flex; display: flex;
align-items: center; align-items: center;
b {
margin: 0 10px;
display: inline-block;
color: black;
font-size: 15px;
font-weight: bold;
}
p {
margin: 0 10px;
font-weight: bold;
display: inline-block;
font-size: 15px;
color: #e6a23c;
}
} }
.right-user b { .setting-form {
margin: 0 10px; .el-form {
display: inline-block; padding: 10px;
color: black; box-sizing: border-box;
font-size: 15px; }
font-weight: bold;
}
.right-user p {
margin: 0 10px;
font-weight: bold;
display: inline-block;
font-size: 15px;
color: #e6a23c;
}
.setting-form .el-form {
padding: 10px;
box-sizing: border-box;
}
.form-block:nth-last-of-type(1) {
border-bottom: 1px solid #ececec;
} }
.form-block { .form-block {
padding: 15px 0; padding: 15px 0;
border-top: 1px solid #ececec; border-top: 1px solid #ececec;
&:nth-last-of-type(1) {
border-bottom: 1px solid #ececec;
}
} }
.block-item { .block-item {
...@@ -493,11 +473,9 @@ export default { ...@@ -493,11 +473,9 @@ export default {
font-size: 14px; font-size: 14px;
padding: 10px 10px; padding: 10px 10px;
} &:hover {
background-color: #ececec;
.block-item:hover { }
background-color: #ececec;
} }
.center-input { .center-input {
...@@ -508,7 +486,6 @@ export default { ...@@ -508,7 +486,6 @@ export default {
flex-shrink: 0; flex-shrink: 0;
overflow: hidden; overflow: hidden;
padding-left: 100px; padding-left: 100px;
} }
.sure-btn { .sure-btn {
...@@ -517,11 +494,15 @@ export default { ...@@ -517,11 +494,15 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
}
.sure-btn ::v-deep .el-button span { ::v-deep {
position: relative; .el-button {
left: -40px; span {
position: relative;
left: -40px;
}
}
}
} }
.check { .check {
...@@ -533,4 +514,5 @@ export default { ...@@ -533,4 +514,5 @@ export default {
z-index: 2; z-index: 2;
color: white; color: white;
} }
</style> </style>
\ No newline at end of file
src/views/design/main/imgSetting.vue
...@@ -249,46 +249,54 @@ export default { ...@@ -249,46 +249,54 @@ export default {
</template> </template>
<style scoped> <style lang="less" scoped>
.img-form { .img-form {
padding: 10px; padding: 10px;
} }
::v-deep {
::v-deep .el-drawer__header { .el-drawer__header {
border-bottom: 1px solid #ececec; border-bottom: 1px solid #ececec;
padding-bottom: 10px; padding-bottom: 10px;
margin-bottom: 20px; margin-bottom: 20px;
}
} }
.form-content { .form-content {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.set-value { .set-value {
height: 100%; height: 100%;
margin-left: 6px; margin-left: 6px;
i {
} width: 20px;
height: 12px;
.set-value i { display: block;
width: 20px; text-align: center;
height: 12px; line-height: 12px;
display: block; cursor: pointer;
text-align: center; border: 1px solid transparent;
line-height: 12px; &:hover {
cursor: pointer; border-color: #ececec;
border: 1px solid transparent; }
} }
.set-value i:hover {
border-color: #ececec;
} }
.drawer {
.drawer .title { width: 300px;
padding-bottom: 10px; bottom: 0;
border-bottom: 1px solid #ececec; top: 50px;
padding: 10px;
z-index: 99;
background: white;
box-shadow: 0 8px 10px -5px rgba(0, 0, 0, .2), 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12);
left: 0;
position: fixed;
border-right: 1px solid #ececec;
height: calc(100vh - 50px);
//animation: ltr-drawer-in .3s 1ms;
.title {
padding-bottom: 10px;
border-bottom: 1px solid #ececec;
}
} }
@keyframes ltr-drawer-in { @keyframes ltr-drawer-in {
...@@ -318,18 +326,4 @@ export default { ...@@ -318,18 +326,4 @@ export default {
} }
} }
.drawer {
width: 300px;
bottom: 0;
top: 50px;
padding: 10px;
z-index: 99;
background: white;
box-shadow: 0 8px 10px -5px rgba(0, 0, 0, .2), 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12);
left: 0;
position: fixed;
border-right: 1px solid #ececec;
height: calc(100vh - 50px);
//animation: ltr-drawer-in .3s 1ms;
}
</style> </style>
\ No newline at end of file
src/views/design/main/index.vue
...@@ -672,64 +672,57 @@ export default { ...@@ -672,64 +672,57 @@ export default {
</div> </div>
</template> </template>
<style scoped> <style lang="less" scoped>
.page-main { .page-main {
flex: 1; flex: 1;
flex-shrink: 0; flex-shrink: 0;
overflow: hidden; overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
} }
.main-bg { .main-bg {
height: 100%; height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
#line { #line {
position: absolute; position: absolute;
z-index: 2; z-index: 2;
} }
.grid { .grid {
border: 1px solid gray; border: 1px solid gray;
overflow: hidden; overflow: hidden;
.grid-row {
.grid-col {
display: inline-block;
border: 1px solid gray;
border-right: none;
border-bottom: none;
}
}
} }
.grid-row { .grid-row {
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
height: 10px; height: 10px;
line-height: 10px; line-height: 10px;
white-space: nowrap; white-space: nowrap;
&:nth-of-type(1) {
.grid-col {
border-top: none !important;
}
}
&:nth-last-of-type(1) {
.grid-col {
border-bottom: none !important;
}
}
.grid-col {
&:nth-of-type(1) {
border-left: none !important;
}
}
} }
.grid-row:nth-of-type(1) .grid-col {
border-top: none !important;
}
.grid-row:nth-last-of-type(1) .grid-col {
border-bottom: none !important;;
}
.grid-row .grid-col:nth-of-type(1) {
border-left: none !important;
}
.grid .grid-row .grid-col {
display: inline-block;
border: 1px solid gray;
border-right: none;
border-bottom: none;
}
#img { #img {
position: absolute; position: absolute;
z-index: 1; z-index: 1;
...@@ -739,8 +732,12 @@ export default { ...@@ -739,8 +732,12 @@ export default {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: auto; width: auto;
img {
pointer-events: none;
width: auto;
height: 100%;
}
} }
.container { .container {
display: flex; display: flex;
width: 100%; width: 100%;
...@@ -749,7 +746,6 @@ export default { ...@@ -749,7 +746,6 @@ export default {
align-items: center; align-items: center;
position: relative; position: relative;
} }
.sucaitu { .sucaitu {
position: absolute; position: absolute;
z-index: 0; z-index: 0;
...@@ -758,92 +754,58 @@ export default { ...@@ -758,92 +754,58 @@ export default {
//justify-content: center; //justify-content: center;
//align-items: center; //align-items: center;
height: 100%; height: 100%;
img {
} width: 100%;
height: 100%;
.sucaitu img { }
width: 100%; .close {
height: 100%; position: absolute;
top: -11px;
right: -12px;
color: white;
z-index: 1000;
width: 20px;
cursor: pointer;
height: 20px;
background: red;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.img {
height: fit-content;
width: 100%;
height: 100%;
cursor: move;
border: 1px dashed transparent;
}
} }
.select-img { .select-img {
border-color: #409eff; border-color: #409eff;
width: 120px;
z-index: 5;
overflow: auto;
background-color: gray;
height: calc(100% - 72px);
padding: 10px;
position: fixed;
box-sizing: border-box;
left: 0;
bottom: 0;
border-right: 1px solid #ececec;
} }
.sucaitu .close {
position: absolute;
top: -11px;
right: -12px;
color: white;
z-index: 1000;
width: 20px;
cursor: pointer;
height: 20px;
background: red;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.sucaitu .img {
height: fit-content;
width: 100%;
height: 100%;
cursor: move;
border: 1px dashed transparent;
}
#img img {
pointer-events: none;
width: auto;
height: 100%;
}
img { img {
-webkit-user-drag: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; user-select: none;
}
img {
-webkit-user-drag: none;
-moz-user-drag: none;
-ms-user-drag: none;
user-drag: none; user-drag: none;
} }
::v-deep .active, .active { ::v-deep .active, .active {
border-color: #66b1ff !important; border-color: #66b1ff !important;
} }
.select-img-index { .select-img-index {
box-sizing: border-box; box-sizing: border-box;
border-color: #409EFF !important; border-color: #409eff !important;
} }
.img-item span {
margin: 5px 0;
color: white;
}
.img-item { .img-item {
padding: 5px; padding: 5px;
display: flex; display: flex;
...@@ -853,25 +815,15 @@ img { ...@@ -853,25 +815,15 @@ img {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
span {
margin: 5px 0;
color: white;
}
} }
.select-img {
width: 120px;
z-index: 5;
overflow: auto;
background-color: gray;
height: calc(100% - 72px);
padding: 10px;
position: fixed;
box-sizing: border-box;
left: 0;
bottom: 0;
border-right: 1px solid #ececec;
}
.sucaitu-img { .sucaitu-img {
position: relative; position: relative;
} }
</style> </style>
<style> <style>
.el-upload { .el-upload {
......
src/views/login/index.vue
...@@ -238,7 +238,7 @@ export default { ...@@ -238,7 +238,7 @@ export default {
</div> </div>
</template> </template>
<style scoped> <style lang="less" scoped>
.check { .check {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment