diff --git a/.env.dev b/.env.dev index 926a368f..070bec3a 100644 --- a/.env.dev +++ b/.env.dev @@ -5,8 +5,8 @@ NODE_ENV = 'development' # VUE_APP_BASE_URL = 'http://18.167.251.121:10086' VUE_APP_BASE_URL = 'https://develop.api.aida.com.hk' # VUE_APP_BASE_URL = 'https://www.api.aida.com.hk' -# 佩佩 +# 徐佩 # VUE_APP_BASE_URL = 'http://192.168.1.4:5567' # 海波 -# VUE_APP_BASE_URL = 'http://192.168.1.9:5567' +# VUE_APP_BASE_URL = 'http://192.168.1.2:5567' diff --git a/public/image/homeIntroduct/introduct1.png b/public/image/homeIntroduct/introduct1.png new file mode 100644 index 00000000..3683dc94 Binary files /dev/null and b/public/image/homeIntroduct/introduct1.png differ diff --git a/public/image/homeIntroduct/introduct2.png b/public/image/homeIntroduct/introduct2.png new file mode 100644 index 00000000..a388373a Binary files /dev/null and b/public/image/homeIntroduct/introduct2.png differ diff --git a/public/image/homeIntroduct/introduct3.png b/public/image/homeIntroduct/introduct3.png new file mode 100644 index 00000000..bfdc74c7 Binary files /dev/null and b/public/image/homeIntroduct/introduct3.png differ diff --git a/public/image/homeIntroduct/introduct4.png b/public/image/homeIntroduct/introduct4.png new file mode 100644 index 00000000..122600c0 Binary files /dev/null and b/public/image/homeIntroduct/introduct4.png differ diff --git a/public/image/homeIntroduct/introduct5.png b/public/image/homeIntroduct/introduct5.png new file mode 100644 index 00000000..a310af46 Binary files /dev/null and b/public/image/homeIntroduct/introduct5.png differ diff --git a/public/image/homeIntroduct/introduct6.png b/public/image/homeIntroduct/introduct6.png new file mode 100644 index 00000000..9ef7f9ac Binary files /dev/null and b/public/image/homeIntroduct/introduct6.png differ diff --git a/public/image/mainImg/img1.png b/public/image/mainImg/img1.png index 37a436a7..c3ab7ee8 100644 Binary files a/public/image/mainImg/img1.png and b/public/image/mainImg/img1.png differ diff --git a/public/image/mainImg/img2.png b/public/image/mainImg/img2.png index 000457a2..4bb34288 100644 Binary files a/public/image/mainImg/img2.png and b/public/image/mainImg/img2.png differ diff --git a/public/image/mainImg/img3.png b/public/image/mainImg/img3.png index dc160d6f..2d340f00 100644 Binary files a/public/image/mainImg/img3.png and b/public/image/mainImg/img3.png differ diff --git a/public/image/mainImg/img4.png b/public/image/mainImg/img4.png index 1b52ac31..00645bf7 100644 Binary files a/public/image/mainImg/img4.png and b/public/image/mainImg/img4.png differ diff --git a/public/image/mainImg/img5.png b/public/image/mainImg/img5.png index 58ccb204..626f3bb4 100644 Binary files a/public/image/mainImg/img5.png and b/public/image/mainImg/img5.png differ diff --git a/public/image/mainImg/img6.png b/public/image/mainImg/img6.png index e210bbe6..fe3f039c 100644 Binary files a/public/image/mainImg/img6.png and b/public/image/mainImg/img6.png differ diff --git a/public/image/mainImg/img7.png b/public/image/mainImg/img7.png index bb329b97..ab2a4085 100644 Binary files a/public/image/mainImg/img7.png and b/public/image/mainImg/img7.png differ diff --git a/public/image/mainImg/img8.png b/public/image/mainImg/img8.png index fa81b846..0551c12c 100644 Binary files a/public/image/mainImg/img8.png and b/public/image/mainImg/img8.png differ diff --git a/public/image/mainImg/img9.png b/public/image/mainImg/img9.png deleted file mode 100644 index 2a20dc59..00000000 Binary files a/public/image/mainImg/img9.png and /dev/null differ diff --git a/public/index.html b/public/index.html index 42d11a35..998cf12f 100644 --- a/public/index.html +++ b/public/index.html @@ -9,6 +9,7 @@ AiDA + diff --git a/public/js/aligning_guidelines.js b/public/js/aligning_guidelines.js index b21c56ce..5d38301e 100644 --- a/public/js/aligning_guidelines.js +++ b/public/js/aligning_guidelines.js @@ -4,7 +4,7 @@ * */ var ctx,canvasAligning -function initAligningGuidelines(canvas,bor) { +function initAligningGuidelines(canvas,bor){ ctx = canvas.getSelectionContext() canvasAligning = canvas setCanvasAligning(bor) diff --git a/public/js/fabric.brushes.js b/public/js/fabric.brushes.js index 51b3f331..c5e63310 100644 --- a/public/js/fabric.brushes.js +++ b/public/js/fabric.brushes.js @@ -126,6 +126,42 @@ fabric.Point.prototype.normalize = function(thickness) { * Convert a brush drawing on the upperCanvas to an image on the fabric canvas. * This makes the drawing editable, it can be moved, rotated, scaled, skewed etc. */ +fabric.BaseBrush.prototype.convertToPath = function() { + var pixelRatio = this.canvas.getRetinaScaling(), + c = fabric.util.copyCanvasElement(this.canvas.upperCanvasEl), + xy = fabric.util.trimCanvas(c), + path = this._points.map(arr => { + arr[1] = arr[1] / this.canvas.getZoom() + arr[2] = arr[2] / this.canvas.getZoom() + return arr.join(' ') + }).join(' '), + pathElemetn = new fabric.Path(path); + if(!xy){ + return + } + let pointerX = this.canvas.viewportTransform[4]; + let pointerY = this.canvas.viewportTransform[5]; + pathElemetn.set({ + strokeDashArray: [this._width*3, this._width*3], + strokeWidth: this._width, + stroke: 'black', + fill:'transparent', + custom:{ + dashed:true + }, + }).setCoords(); + let group = new fabric.Group([pathElemetn],{ + left:((xy.x)/pixelRatio-pointerX)/this.canvas.getZoom(), + top:((xy.y)/pixelRatio-pointerY)/this.canvas.getZoom(), + custom:{ + dashed:true + }, + }) + + this.canvas.add(group).clearContext(this.canvas.contextTop); + this.canvas.clearContext(this.canvas.contextTop); +} + fabric.BaseBrush.prototype.convertToImg = function() { var pixelRatio = this.canvas.getRetinaScaling(), c = fabric.util.copyCanvasElement(this.canvas.upperCanvasEl), @@ -135,8 +171,13 @@ fabric.BaseBrush.prototype.convertToImg = function() { return } let pointerX = this.canvas.viewportTransform[4]; - let pointerY = this.canvas.viewportTransform[5]; - img.set({left:(xy.x)/pixelRatio-pointerX,top:(xy.y)/pixelRatio-pointerY,'scaleX':1/pixelRatio,'scaleY':1/pixelRatio}).setCoords(); + let pointerY = this.canvas.viewportTransform[5]; + img.set({ + left:((xy.x)/pixelRatio-pointerX)/this.canvas.getZoom(), + top:((xy.y)/pixelRatio-pointerY)/this.canvas.getZoom(), + 'scaleX':1/pixelRatio/this.canvas.getZoom(), + 'scaleY':1/pixelRatio/this.canvas.getZoom() + }).setCoords(); this.canvas.add(img).clearContext(this.canvas.contextTop); this.canvas.clearContext(this.canvas.contextTop); } @@ -234,8 +275,8 @@ fabric.CrayonBrush = fabric.util.createClass(fabric.BaseBrush, { }, onMouseDown: function(pointer) { - pointer.x = pointer.x + this.canvas.viewportTransform[4]; - pointer.y = pointer.y + this.canvas.viewportTransform[5]; + pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4]; + pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5]; this.canvas.contextTop.globalAlpha = this.opacity; this._size = this.width / 2 + this._baseWidth; this._drawn = false; @@ -243,8 +284,8 @@ fabric.CrayonBrush = fabric.util.createClass(fabric.BaseBrush, { }, onMouseMove: function(pointer) { - pointer.x = pointer.x + this.canvas.viewportTransform[4]; - pointer.y = pointer.y + this.canvas.viewportTransform[5]; + pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4]; + pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5]; this.update(pointer); this.draw(this.canvas.contextTop); }, @@ -399,7 +440,6 @@ fabric.InkBrush = fabric.util.createClass(fabric.BaseBrush, { initialize: function(canvas, opt) { opt = opt || {}; - this.canvas = canvas; this.width = opt.width || this.width; this.color = opt.color || this.color; @@ -409,8 +449,8 @@ fabric.InkBrush = fabric.util.createClass(fabric.BaseBrush, { }, _render: function(pointer) { - pointer.x = pointer.x + this.canvas.viewportTransform[4]; - pointer.y = pointer.y + this.canvas.viewportTransform[5]; + pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4]; + pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5]; var len, i, point = this.setPointer(pointer), subtractPoint = point.subtract(this._lastPoint), distance = point.distanceFrom(this._lastPoint), @@ -422,7 +462,7 @@ fabric.InkBrush = fabric.util.createClass(fabric.BaseBrush, { } if (distance > 30) { - // this.drawSplash(point, this._inkAmount); + this.drawSplash(point, this._inkAmount); } }, @@ -475,8 +515,8 @@ fabric.InkBrush = fabric.util.createClass(fabric.BaseBrush, { }, _resetTip: function(pointer) { - pointer.x = pointer.x + this.canvas.viewportTransform[4]; - pointer.y = pointer.y + this.canvas.viewportTransform[5]; + pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4]; + pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5]; var len, i, point = this.setPointer(pointer); this._strokes = []; @@ -510,8 +550,8 @@ fabric.LongfurBrush = fabric.util.createClass(fabric.BaseBrush, { }, onMouseDown: function(pointer) { - pointer.x = pointer.x + this.canvas.viewportTransform[4]; - pointer.y = pointer.y + this.canvas.viewportTransform[5]; + pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4]; + pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5]; this._points = [pointer]; this._count = 0; @@ -524,8 +564,8 @@ fabric.LongfurBrush = fabric.util.createClass(fabric.BaseBrush, { }, onMouseMove: function(pointer) { - pointer.x = pointer.x + this.canvas.viewportTransform[4]; - pointer.y = pointer.y + this.canvas.viewportTransform[5]; + pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4]; + pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5]; this._points.push(pointer); var i, dx, dy, d, size, @@ -609,8 +649,8 @@ fabric.WritingBrush = fabric.util.createClass(fabric.BaseBrush, { }, onMouseDown: function(pointer) { - pointer.x = pointer.x + this.canvas.viewportTransform[4]; - pointer.y = pointer.y + this.canvas.viewportTransform[5]; + pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4]; + pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5]; this._lastPoint = pointer; this.canvas.contextTop.strokeStyle = this.color; this.canvas.contextTop.lineWidth = this._lineWidth; @@ -619,8 +659,8 @@ fabric.WritingBrush = fabric.util.createClass(fabric.BaseBrush, { onMouseMove: function(pointer) { if (this.canvas._isCurrentlyDrawing) { - pointer.x = pointer.x + this.canvas.viewportTransform[4]; - pointer.y = pointer.y + this.canvas.viewportTransform[5]; + pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4]; + pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5]; this._render(pointer); } }, @@ -680,8 +720,8 @@ fabric.MarkerBrush = fabric.util.createClass(fabric.BaseBrush, { }, onMouseDown: function(pointer) { - pointer.x = pointer.x + this.canvas.viewportTransform[4]; - pointer.y = pointer.y + this.canvas.viewportTransform[5]; + pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4]; + pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5]; this._lastPoint = pointer; this.canvas.contextTop.strokeStyle = this.color; this.canvas.contextTop.lineWidth = this._lineWidth; @@ -690,8 +730,8 @@ fabric.MarkerBrush = fabric.util.createClass(fabric.BaseBrush, { onMouseMove: function(pointer) { if (this.canvas._isCurrentlyDrawing) { - pointer.x = pointer.x + this.canvas.viewportTransform[4]; - pointer.y = pointer.y + this.canvas.viewportTransform[5]; + pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4]; + pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5]; this._render(pointer); } }, @@ -702,6 +742,67 @@ fabric.MarkerBrush = fabric.util.createClass(fabric.BaseBrush, { this.convertToImg(); } }); // End MarkerBrush +/** + * test + * Based on code by Tennison Chan. + */ +fabric.Test = fabric.util.createClass(fabric.BaseBrush, { + color: '#000', + opacity: 1, + + _points: [], + + _width: 2, + initialize: function(canvas, opt) { + opt = opt || {}; + this.canvas = canvas; + this._width = opt._width || this._width; + this.color = opt.color || this.color; + + }, + + _render: function(pointer) { + + var ctx, lineWidthDiff, i, len; + ctx = this.canvas.contextTop; + + this._points.push(['L', pointer.x, pointer.y]); + + // if(this._points.length % 10 < 5){ + let points = this._points + ctx.beginPath(); + ctx.moveTo(points[points.length - 2][1], points[points.length - 2][2]); + ctx.lineTo(points[points.length - 1][1], points[points.length - 1][2]); + ctx.stroke(); + // } + }, + + onMouseDown: function(pointer) { + pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4]; + pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5]; + this._points = [] + this._points.push(['M', pointer.x, pointer.y]); + + var ctx = this.canvas.contextTop; + ctx.strokeStyle = 'rgba(' + 0 + ',' + 0 + ',' + 0 + ',' + 1 + ')'; + ctx.lineWidth = this._width * this.canvas.getZoom(); + ctx.lineJoin = ctx.lineCap = 'round'; + }, + + onMouseMove: function(pointer) { + if (this.canvas._isCurrentlyDrawing) { + pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4]; + pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5]; + this._render(pointer); + } + }, + + onMouseUp: function() { + this._points.push(['Z']); + this.convertToPath(); + } +}); // End test + /** * MarkerBrush * Based on code by Tennison Chan. @@ -756,8 +857,8 @@ fabric.MarkerBrush1 = fabric.util.createClass(fabric.BaseBrush, { }, onMouseDown: function(pointer) { - pointer.x = pointer.x + this.canvas.viewportTransform[4]; - pointer.y = pointer.y + this.canvas.viewportTransform[5]; + pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4]; + pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5]; this._lastPoint = pointer; this.canvas.contextTop.strokeStyle = this.color; this.canvas.contextTop.lineWidth = this._lineWidth; @@ -766,8 +867,8 @@ fabric.MarkerBrush1 = fabric.util.createClass(fabric.BaseBrush, { onMouseMove: function(pointer) { if (this.canvas._isCurrentlyDrawing) { - pointer.x = pointer.x + this.canvas.viewportTransform[4]; - pointer.y = pointer.y + this.canvas.viewportTransform[5]; + pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4]; + pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5]; this._render(pointer); } }, @@ -833,8 +934,8 @@ fabric.PenBrush = fabric.util.createClass(fabric.BaseBrush, { }, onMouseDown: function(pointer) { - pointer.x = pointer.x + this.canvas.viewportTransform[4]; - pointer.y = pointer.y + this.canvas.viewportTransform[5]; + pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4]; + pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5]; this._lastPoint = pointer; this.canvas.contextTop.lineWidth = this._lineWidth; this._size = this.width + this._baseWidth; @@ -842,8 +943,8 @@ fabric.PenBrush = fabric.util.createClass(fabric.BaseBrush, { onMouseMove: function(pointer) { if (this.canvas._isCurrentlyDrawing) { - pointer.x = pointer.x + this.canvas.viewportTransform[4]; - pointer.y = pointer.y + this.canvas.viewportTransform[5]; + pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4]; + pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5]; this._render(pointer); } }, @@ -900,8 +1001,8 @@ fabric.RibbonBrush = fabric.util.createClass(fabric.BaseBrush, { for (var i = 0; i < this._nrPainters; i++) { this._painters.push({ dx:this.canvas.width / 2, dy:this.canvas.height / 2, ax:0, ay:0, div:.1, ease:Math.random() * .2 + .6 }); } - pointer.x = pointer.x + this.canvas.viewportTransform[4]; - pointer.y = pointer.y + this.canvas.viewportTransform[5]; + pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4]; + pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5]; this._lastPoint = pointer; //ctx.globalCompositeOperation = 'source-over'; @@ -918,8 +1019,8 @@ fabric.RibbonBrush = fabric.util.createClass(fabric.BaseBrush, { }, onMouseMove: function(pointer) { - pointer.x = pointer.x + this.canvas.viewportTransform[4]; - pointer.y = pointer.y + this.canvas.viewportTransform[5]; + pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4]; + pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5]; this._lastPoint = pointer; }, @@ -954,8 +1055,8 @@ fabric.ShadedBrush = fabric.util.createClass(fabric.BaseBrush, { }, onMouseDown: function(pointer) { - pointer.x = pointer.x + this.canvas.viewportTransform[4]; - pointer.y = pointer.y + this.canvas.viewportTransform[5]; + pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4]; + pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5]; this._points = [pointer]; var ctx = this.canvas.contextTop, @@ -967,8 +1068,8 @@ fabric.ShadedBrush = fabric.util.createClass(fabric.BaseBrush, { }, onMouseMove: function(pointer) { - pointer.x = pointer.x + this.canvas.viewportTransform[4]; - pointer.y = pointer.y + this.canvas.viewportTransform[5]; + pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4]; + pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5]; this._points.push(pointer); var ctx = this.canvas.contextTop, @@ -1025,8 +1126,8 @@ fabric.SketchyBrush = fabric.util.createClass(fabric.BaseBrush, { onMouseDown: function(pointer) { this._count = 0; - pointer.x = pointer.x + this.canvas.viewportTransform[4]; - pointer.y = pointer.y + this.canvas.viewportTransform[5]; + pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4]; + pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5]; this._points = [pointer]; var ctx = this.canvas.contextTop, @@ -1037,8 +1138,8 @@ fabric.SketchyBrush = fabric.util.createClass(fabric.BaseBrush, { }, onMouseMove: function(pointer) { - pointer.x = pointer.x + this.canvas.viewportTransform[4]; - pointer.y = pointer.y + this.canvas.viewportTransform[5]; + pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4]; + pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5]; this._points.push(pointer); var i, dx, dy, d, factor = .3 * this.width, @@ -1124,8 +1225,8 @@ fabric.SpraypaintBrush = fabric.util.createClass(fabric.BaseBrush, { onMouseDown: function(pointer) { this.canvas.contextTop.globalAlpha = this.opacity; - pointer.x = pointer.x + this.canvas.viewportTransform[4]; - pointer.y = pointer.y + this.canvas.viewportTransform[5]; + pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4]; + pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5]; this._point = new fabric.Point(pointer.x, pointer.y); this._lastPoint = this._point; @@ -1138,8 +1239,8 @@ fabric.SpraypaintBrush = fabric.util.createClass(fabric.BaseBrush, { }, onMouseMove: function(pointer) { - pointer.x = pointer.x + this.canvas.viewportTransform[4]; - pointer.y = pointer.y + this.canvas.viewportTransform[5]; + pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4]; + pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5]; this._lastPoint = this._point; this._point = new fabric.Point(pointer.x, pointer.y); }, @@ -1214,8 +1315,8 @@ fabric.SquaresBrush = fabric.util.createClass(fabric.BaseBrush, { var ctx = this.canvas.contextTop, color = fabric.util.colorValues(this.color), bgColor = fabric.util.colorValues(this.bgColor); - pointer.x = pointer.x + this.canvas.viewportTransform[4]; - pointer.y = pointer.y + this.canvas.viewportTransform[5]; + pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4]; + pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5]; this._lastPoint = pointer; this._drawn = false; @@ -1227,8 +1328,8 @@ fabric.SquaresBrush = fabric.util.createClass(fabric.BaseBrush, { }, onMouseMove: function(pointer) { - pointer.x = pointer.x + this.canvas.viewportTransform[4]; - pointer.y = pointer.y + this.canvas.viewportTransform[5]; + pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4]; + pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5]; var ctx = this.canvas.contextTop, dx = pointer.x - this._lastPoint.x, dy = pointer.y - this._lastPoint.y, @@ -1281,16 +1382,16 @@ fabric.WebBrush = fabric.util.createClass(fabric.BaseBrush, { }, onMouseDown: function(pointer) { - pointer.x = pointer.x + this.canvas.viewportTransform[4]; - pointer.y = pointer.y + this.canvas.viewportTransform[5]; + pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4]; + pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5]; this._points = [pointer]; this._count = 0; this._colorValues = fabric.util.colorValues(this.color); }, onMouseMove: function(pointer) { - pointer.x = pointer.x + this.canvas.viewportTransform[4]; - pointer.y = pointer.y + this.canvas.viewportTransform[5]; + pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4]; + pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5]; this._points.push(pointer); var ctx = this.canvas.contextTop, diff --git a/src/App.vue b/src/App.vue index 3e9f70d9..c78513c2 100644 --- a/src/App.vue +++ b/src/App.vue @@ -7,5 +7,6 @@ font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + height: 100%; } diff --git a/src/assets/images/homePage/bankCard.svg b/src/assets/images/homePage/bankCard.svg deleted file mode 100644 index d81974d9..00000000 --- a/src/assets/images/homePage/bankCard.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/images/homePage/home-bg.png b/src/assets/images/homePage/home-bg.png new file mode 100644 index 00000000..de78fc0f Binary files /dev/null and b/src/assets/images/homePage/home-bg.png differ diff --git a/src/assets/images/homePage/stripe.svg b/src/assets/images/homePage/stripe.svg new file mode 100644 index 00000000..a5db7e9b --- /dev/null +++ b/src/assets/images/homePage/stripe.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/icon/details_color.png b/src/assets/images/icon/details_color.png new file mode 100644 index 00000000..6233167d Binary files /dev/null and b/src/assets/images/icon/details_color.png differ diff --git a/src/assets/images/icon/details_elements.png b/src/assets/images/icon/details_elements.png new file mode 100644 index 00000000..c08eabb4 Binary files /dev/null and b/src/assets/images/icon/details_elements.png differ diff --git a/src/assets/images/icon/details_print.png b/src/assets/images/icon/details_print.png new file mode 100644 index 00000000..6c5fb08a Binary files /dev/null and b/src/assets/images/icon/details_print.png differ diff --git a/src/assets/images/icon/details_sketch.png b/src/assets/images/icon/details_sketch.png new file mode 100644 index 00000000..328fed1b Binary files /dev/null and b/src/assets/images/icon/details_sketch.png differ diff --git a/src/assets/images/loginPage/aida_logo_centent.jpg b/src/assets/images/loginPage/aida_logo_centent.jpg index 22fc475c..5e5ab53f 100644 Binary files a/src/assets/images/loginPage/aida_logo_centent.jpg and b/src/assets/images/loginPage/aida_logo_centent.jpg differ diff --git a/src/assets/images/loginPage/aida_logo_centent.png b/src/assets/images/loginPage/aida_logo_centent.png new file mode 100644 index 00000000..e25a05c8 Binary files /dev/null and b/src/assets/images/loginPage/aida_logo_centent.png differ diff --git a/src/assets/images/loginPage/gmailIcon.svg b/src/assets/images/loginPage/gmailIcon.svg new file mode 100644 index 00000000..d482078a --- /dev/null +++ b/src/assets/images/loginPage/gmailIcon.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/loginPage/phone.svg b/src/assets/images/loginPage/phone.svg new file mode 100644 index 00000000..b1c9c4a7 --- /dev/null +++ b/src/assets/images/loginPage/phone.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/assets/images/loginPage/weiXinIcon.svg b/src/assets/images/loginPage/weiXinIcon.svg new file mode 100644 index 00000000..4a6a130d --- /dev/null +++ b/src/assets/images/loginPage/weiXinIcon.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/style/style.css b/src/assets/style/style.css index daf8f7f1..7f2c6859 100644 --- a/src/assets/style/style.css +++ b/src/assets/style/style.css @@ -6,9 +6,9 @@ body, height: 100%; font-family: 'Roboto', sans-serif; overflow: hidden; - --aida-fsize2: calc(2.2rem*1.2); - --aida-fsize1-8: calc(1.8rem*1.2); - --aida-fsize1-6: calc(1.6rem*1.2); + --aida-fsize2: calc(2.6rem); + --aida-fsize1-8: calc(1.8rem); + --aida-fsize1-6: calc(1.6rem); --aida-fsize1-4: calc(1.4rem*1.2); --antd-wave-shadow-color: #39215b; } @@ -43,18 +43,6 @@ li { height: 100%; margin: 0 auto; } -.button_first { - width: 11.85rem; - text-align: center; - height: 4rem; - line-height: 4rem; - font-size: 1.4rem; - font-weight: 400; - color: #000; - cursor: pointer; - border-radius: 1.5rem; - border: 2px solid; -} .button_second { width: 14rem; text-align: center; @@ -67,48 +55,41 @@ li { border-radius: 1.5rem; border: 2px solid; } -.system_silder { +.ant-slider.system_silder { + margin: 0; width: 100%; } -.system_silder .ant-slider { - margin: 0; - width: 12rem; -} -.system_silder .ant-slider .ant-slider-rail { +.ant-slider.system_silder .ant-slider-rail { height: 0.6rem; border-radius: 0.3rem; background: #F2F0FD; } -.system_silder .ant-slider .ant-slider-track { +.ant-slider.system_silder .ant-slider-track { height: 0.6rem; border-radius: 0.3rem; - background: #343579; + background: #000; } -.system_silder .ant-slider .ant-slider-handle { +.ant-slider.system_silder .ant-slider-handle { margin-top: -0.4rem; - border: solid 0.2rem #343579; -} -.ant-slider:hover .ant-slider-track { - background-color: #e1e1e1; + border: solid 0.2rem #000; } .ant-slider:hover .ant-slider-handle { - box-shadow: rgba(41, 62, 141, 0.16) 0px 0 0 4px; + box-shadow: rgba(0, 0, 0, 0.16) 0px 0 0 4px; } .ant-slider-track, .ant-slider-rail { height: calc(0.6rem*1.2); - background-color: #e1e1e1; background-size: 100% 100%; border-radius: calc(0.5rem*1.2); } .ant-slider .ant-slider-handle:not(.ant-tooltip-open), .ant-slider-handle { - background-color: #2d2e76 !important; + background-color: #000000 !important; border: none !important; margin-top: -4px; } .ant-slider-handle:hover { - box-shadow: 0 0 0 5px rgba(45, 46, 118, 0.2); + box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.2); } .cliAdmin_like { animation: adminLike 0.5s ease-in-out forwards; @@ -156,6 +137,9 @@ li { border-radius: 5px; padding: 0.6rem 0.5rem; } +.ant-modal-mask { + background-color: #666666; +} .select_block { height: 4rem; } @@ -183,13 +167,91 @@ li { .select_block .ant-select-single:not(.ant-select-customize-input) .ant-select-selector { padding: 0 1rem; } +.gallery_input { + font-size: 1.8rem; + background-color: #f3f3f3; + border: 1px solid #d9d9d9; + border-radius: 4rem; + padding: 2rem; + box-sizing: content-box; + height: 2.5rem; + transition: all 0.3s; + font-weight: 600; + line-height: 1.5715; +} +.ant-select:not(.ant-select-disabled):hover .ant-select-selector { + border: 1px solid #000; +} +.ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector { + box-shadow: none; + border: 1px solid #000; +} +.ant-picker:hover, +.ant-picker-focused, +.gallery_input:hover { + border: 1px solid #000; +} +.ant-picker-focused { + box-shadow: none; + border: 1px solid #000; +} +.ant-picker-suffix { + display: flex; +} +.ant-picker-range .ant-picker-active-bar { + background: #353535; +} +.gallery_btn { + padding: 0 1.8rem; + line-height: 6rem; + border-radius: 4rem; + font-size: 1.8rem; + transition: all 0.3s; + display: inline-block; + color: #fff; + background-color: #000; + text-align: center; + font-weight: 600; + border: 2px solid #000; + cursor: pointer; + box-sizing: border-box; + white-space: nowrap; +} +.gallery_btn.btnSamil { + padding: 0rem 2rem; + line-height: 4rem; + font-size: 1.6rem; +} +.gallery_btn.gallery_btn_radius { + border-radius: 1.4rem; +} +.gallery_btn.gallery_btn:hover { + background-color: #fff; + color: #000; +} +.gallery_btn.white { + background-color: #fff; + color: #000; +} +.gallery_btn.white.white:hover { + color: #fff; + background-color: #000; +} +.gallery_btn.white.active { + color: #fff; + background-color: #000; +} +.gallery_btn.active { + background-color: #fff; + color: #000; +} .started_btn { padding: 0 calc(1.8rem*1.2); display: inline-block; - border-radius: calc(2rem*1.2); + border-radius: 4rem; font-size: calc(1.2rem*1.2); color: #fff; - background-color: #39215b; + background-color: #000000; cursor: pointer; height: 3.3rem; line-height: 3.3rem; @@ -212,57 +274,14 @@ li { transform: rotate(360deg); } } -.el-cascader { - font-size: 1.2rem; - width: 100%; - height: 3rem; - --el-color-primary: #d9d9d9; - --el-cascader-tag-background: #e1d9ec; -} -.el-cascader .el-input { - height: 100%; -} -.el-cascader .el-input .el-input__wrapper .el-input__inner { - height: 80% !important; - font-size: 1.2rem; +.el-popper.is-pure { + border: 1px solid; } .el-popper { padding: 0.5rem 1.1rem; } -.el-cascader__tags, -.el-cascader__collapse-tag { - --el-color-primary: #d9d9d9; - --el-cascader-tag-background: #e1d9ec; - --el-fill-color: #e1d9ec; - height: 100%; - width: 90% !important; - flex-wrap: nowrap; - overflow: hidden; - align-items: center; -} -.el-cascader__tags .el-tag--light, -.el-cascader__collapse-tag .el-tag--light { - margin: 0 0 0 0.6rem; - padding-right: 0.5rem; - height: 80%; - --el-icon-size: 1.4rem; - display: flex; -} -.el-cascader__tags .el-tag--light .el-tag__content, -.el-cascader__collapse-tag .el-tag--light .el-tag__content { - font-size: 1.4rem; - color: #000; -} -.el-cascader__tags .el-cascader__search-input, -.el-cascader__collapse-tag .el-cascader__search-input { - height: 100%; - margin: 0 0 0 1.1rem; -} -.el-cascader__collapse-tag { - margin-bottom: 0.5rem; -} -.el-cascader__collapse-tag .el-cascader__collapse-tag .el-tag--light { - display: flex !important; +.el-popper .el-popper__arrow { + display: none; } .hideEvents { pointer-events: none !important; @@ -421,27 +440,6 @@ li { top: 0.1rem; width: 0.3rem; } -.ant-select:not(.ant-select-disabled):hover .ant-select-selector { - border: 1px solid #d9d9d9; -} -.ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector { - box-shadow: 0 0 0 2px rgba(83, 83, 83, 0.3); - border: 1px solid #d9d9d9; -} -.ant-picker:hover, -.ant-picker-focused { - border: 1px solid #d9d9d9; -} -.ant-picker-focused { - box-shadow: 0 0 0 2px rgba(83, 83, 83, 0.3); - border: 1px solid #d9d9d9; -} -.ant-picker-suffix { - display: flex; -} -.ant-picker-range .ant-picker-active-bar { - background: #353535; -} .trial_page .ant-select-allow-clear { height: 100%; } @@ -529,21 +527,6 @@ li { .trial_page .ant-checkbox-wrapper-disabled .ant-checkbox-disabled .ant-checkbox-inner::after { border-color: #eeeeee; } -.ant-modal-mask { - background: linear-gradient(45deg, #eee4f3, #f3f4e6); - border-radius: 1rem; - overflow: hidden; - height: calc(100% - 7rem); - bottom: 0; - top: auto; - margin: 0 9rem; -} -.ant-modal { - box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); -} -.ant-modal div[aria-hidden="true"] { - display: none !important; -} .ant-modal-confirm-confirm .ant-modal-content { border-radius: 1rem; } @@ -556,27 +539,123 @@ li { color: #fff; margin-left: 10rem; } -.modal_component.ant-modal { - top: 0; -} -.modal_component .ant-modal-content { - overflow: hidden; -} -.modal_component .ant-modal-content .ant-modal-header { - padding: 2.4rem 2.6rem; - background: #F7F7F7; -} -.modal_component .ant-modal-content .ant-modal-header .ant-modal-title { - font-size: 1.8rem; - line-height: 1.8rem; - color: #030303; -} -.modal_component .ant-modal-content .ant-modal-body { - padding: 0; -} .ant-drawer-content-wrapper { width: 50rem !important; } +.ant-picker-time-panel-column > li.ant-picker-time-panel-cell-selected .ant-picker-time-panel-cell-inner { + background-color: #ededed; +} +.ant-picker-cell-in-view.ant-picker-cell-in-range::before { + background-color: #ededed; +} +.ant-btn-primary { + background-color: #000; +} +.ant-picker-range-wrapper { + border-radius: 2rem; + overflow: hidden; + background-color: #fff; + border: 2px solid #000; +} +.ant-picker-range-wrapper .ant-picker-range-arrow { + display: none; +} +.ant-picker-date-panel .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-start .ant-picker-cell-inner::after, +.ant-picker-date-panel .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-end .ant-picker-cell-inner::after { + background-color: #ededed; +} +.ant-picker-cell-in-view.ant-picker-cell-today .ant-picker-cell-inner::before { + border-color: #ededed; +} +.ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover::before, +.ant-picker-cell-in-view.ant-picker-cell-range-start.ant-picker-cell-range-hover::before, +.ant-picker-cell-in-view.ant-picker-cell-range-end.ant-picker-cell-range-hover::before, +.ant-picker-cell-in-view.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single).ant-picker-cell-range-hover-start::before, +.ant-picker-cell-in-view.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single).ant-picker-cell-range-hover-end::before, +.ant-picker-panel > :not(.ant-picker-date-panel) .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-start::before, +.ant-picker-panel > :not(.ant-picker-date-panel) .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-end::before { + background-color: #ededed; +} +.ant-picker-cell-in-view.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single)::before, +.ant-picker-cell-in-view.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single)::before { + background-color: #ededed; +} +.ant-picker-cell-in-view.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single)::before, +.ant-picker-cell-in-view.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single)::before { + background-color: #ededed; +} +.ant-picker-cell-in-view.ant-picker-cell-selected .ant-picker-cell-inner, +.ant-picker-cell-in-view.ant-picker-cell-range-start .ant-picker-cell-inner, +.ant-picker-cell-in-view.ant-picker-cell-range-end .ant-picker-cell-inner { + background-color: #000; +} +.ant-picker-cell-in-view.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single):not(.ant-picker-cell-range-start) .ant-picker-cell-inner { + border-radius: 0 2rem 2rem 0; +} +.ant-picker-cell-in-view.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single):not(.ant-picker-cell-range-end) .ant-picker-cell-inner { + border-radius: 2rem 0 0 2rem; +} +.ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover::before, +.ant-picker-cell-in-view.ant-picker-cell-range-start.ant-picker-cell-range-hover::before, +.ant-picker-cell-in-view.ant-picker-cell-range-end.ant-picker-cell-range-hover::before, +.ant-picker-cell-in-view.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single).ant-picker-cell-range-hover-start::before, +.ant-picker-cell-in-view.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single).ant-picker-cell-range-hover-end::before, +.ant-picker-panel > :not(.ant-picker-date-panel) .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-start::before, +.ant-picker-panel > :not(.ant-picker-date-panel) .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-end::before { + background-color: #c9c9c9; +} +tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover:first-child::after, +tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-end:first-child::after, +.ant-picker-cell-in-view.ant-picker-cell-start.ant-picker-cell-range-hover-edge-start.ant-picker-cell-range-hover-edge-start-near-range::after, +.ant-picker-cell-in-view.ant-picker-cell-range-hover-edge-start:not(.ant-picker-cell-range-hover-edge-start-near-range)::after, +.ant-picker-cell-in-view.ant-picker-cell-range-hover-start::after { + border-left: 1px dashed #c9c9c9; +} +tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover:last-child::after, +tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::after, +.ant-picker-cell-in-view.ant-picker-cell-end.ant-picker-cell-range-hover-edge-end.ant-picker-cell-range-hover-edge-end-near-range::after, +.ant-picker-cell-in-view.ant-picker-cell-range-hover-edge-end:not(.ant-picker-cell-range-hover-edge-end-near-range)::after, +.ant-picker-cell-in-view.ant-picker-cell-range-hover-end::after { + border-right: 1px dashed #c9c9c9; +} +.ant-picker-cell-in-view.ant-picker-cell-range-hover-start:not(.ant-picker-cell-in-range):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end)::after, +.ant-picker-cell-in-view.ant-picker-cell-range-hover-end:not(.ant-picker-cell-in-range):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end)::after, +.ant-picker-cell-in-view.ant-picker-cell-range-hover-start.ant-picker-cell-range-start-single::after, +.ant-picker-cell-in-view.ant-picker-cell-range-hover-start.ant-picker-cell-range-start.ant-picker-cell-range-end.ant-picker-cell-range-end-near-hover::after, +.ant-picker-cell-in-view.ant-picker-cell-range-hover-end.ant-picker-cell-range-start.ant-picker-cell-range-end.ant-picker-cell-range-start-near-hover::after, +.ant-picker-cell-in-view.ant-picker-cell-range-hover-end.ant-picker-cell-range-end-single::after, +.ant-picker-cell-in-view.ant-picker-cell-range-hover:not(.ant-picker-cell-in-range)::after { + border-top: 1px dashed #c9c9c9; + border-bottom: 1px dashed #c9c9c9; +} +.ant-select-single.ant-select-show-arrow .ant-select-selection-search { + height: 2.5rem; + top: 50%; + transform: translateY(-50%); + display: flex; +} +.ant-select-single.ant-select-show-arrow .ant-select-selection-search .ant-select-selection-search-input { + height: 100% !important; +} +.gallerySelect .ant-select-selector { + height: 2.5rem; + border-radius: 4rem; + padding: 2rem; + box-sizing: content-box; + width: 100%; + box-sizing: border-box; +} +.gallerySelect.ant-select-lg { + font-size: 1.6rem; +} +.gallerySelect.ant-select-single.ant-select-lg:not(.ant-select-customize-input) .ant-select-selector { + height: 5.5rem; +} +.gallerySelect.ant-select-single.ant-select-lg:not(.ant-select-customize-input) .ant-select-selector::after, +.gallerySelect.ant-select-single.ant-select-lg:not(.ant-select-customize-input) .ant-select-selector .ant-select-selection-item, +.gallerySelect.ant-select-single.ant-select-lg:not(.ant-select-customize-input) .ant-select-selector .ant-select-selection-placeholder { + line-height: 5.5rem; +} .generalModel_page { width: 100%; height: 100%; @@ -608,19 +687,43 @@ li { color: #fff; cursor: pointer; } -.generalModel_page .generalModel_table_search .generalModel_state { +.generalModel_state { position: relative; display: flex; align-items: center; width: auto; flex-wrap: wrap; } -.generalModel_page .generalModel_table_search .generalModel_state .generalModel_state_item { +.generalModel_state .generalModel_state_item { display: flex; align-items: center; margin-right: 5rem; + height: 6rem; } -.generalModel_page .generalModel_table_search .generalModel_state .generalModel_state_item > span { +.generalModel_state .generalModel_state_item.smail > input { + padding: 1rem 2rem !important; +} +.generalModel_state .generalModel_state_item.smail .ant-picker-range, +.generalModel_state .generalModel_state_item.smail .ant-select-selector, +.generalModel_state .generalModel_state_item.smail .range_picker { + padding: 1rem 2rem !important; +} +.generalModel_state .generalModel_state_item.smail .el-cascader { + padding: 1rem 2rem; +} +.generalModel_state .generalModel_state_item > input { + height: 2.5rem !important; + border-radius: 4rem; + padding: calc(2rem - 1px * 2) !important; + box-sizing: content-box; + background-color: #f3f3f3; + background-color: #fff; + width: calc(100% - 4rem); + font-size: 1.8rem; + transition: all 0.3s; + border: 1px solid; +} +.generalModel_state .generalModel_state_item > span { font-size: 2rem; font-weight: 400; color: #030303; @@ -630,30 +733,108 @@ li { min-width: 5rem; text-align: left; } -.generalModel_page .generalModel_table_search .generalModel_state .generalModel_state_item .ant-picker-range { - height: 5rem; +.generalModel_state .generalModel_state_item .ant-picker-range, +.generalModel_state .generalModel_state_item .ant-select-selector, +.generalModel_state .generalModel_state_item .range_picker { + height: 2.5rem !important; + border-radius: 4rem; + padding: calc(2rem - 1px * 2) !important; + box-sizing: content-box; + background-color: #f3f3f3; + background-color: #fff; + width: calc(100% - 4rem); + border: 1px solid #000; } -.generalModel_page .generalModel_table_search .generalModel_state .generalModel_state_item .ant-select-lg { - font-size: 14px; +.generalModel_state .generalModel_state_item .ant-picker-input > input { + font-size: 1.8rem; } -.generalModel_page .generalModel_table_search .generalModel_state .generalModel_state_item .ant-select-lg .ant-select-selector { - height: 5rem; +.generalModel_state .generalModel_state_item .ant-select-lg { + font-size: 1.8rem; } -.generalModel_page .generalModel_table_search .generalModel_state .generalModel_state_item .ant-select-lg .ant-select-selector .ant-select-selection-item { - line-height: 5rem; +.generalModel_state .generalModel_state_item .ant-select-lg .ant-select-selector .ant-select-selection-item { + height: 100%; + display: flex; + align-items: center; } -.generalModel_page .generalModel_table_search .generalModel_state .generalModel_state_item .ant-select-lg .ant-select-selector input { - line-height: 5rem; - height: 5rem; +.generalModel_state .generalModel_state_item .el-cascader { + font-size: 1.8rem; + width: 100%; + border: 1px solid #dcdfe6; + border-radius: 4rem; + background-color: #fff; + height: 2.5rem; + padding: 2rem; + transition: all 0.3s; + box-sizing: content-box; + border: 1px solid; } -.generalModel_page .generalModel_table_search .generalModel_state .generalModel_current { +.generalModel_state .generalModel_state_item .el-cascader .el-cascader__tags, +.generalModel_state .generalModel_state_item .el-cascader .el-input { + height: 100%; +} +.generalModel_state .generalModel_state_item .el-cascader .el-input .el-input__wrapper { + box-shadow: none; + padding: 0; + width: 100%; +} +.generalModel_state .generalModel_state_item .el-cascader .el-input .el-input__wrapper .el-input__inner { + font-size: 1.8rem; +} +.generalModel_state .generalModel_state_item .el-cascader__tags { + padding-left: 1rem; +} +.generalModel_state .generalModel_state_item .el-cascader__tags, +.generalModel_state .generalModel_state_item .el-cascader__collapse-tag { + --el-color-primary: #d9d9d9; + --el-cascader-tag-background: #000; + --el-fill-color: #e1d9ec; + box-sizing: content-box; + width: 90% !important; + flex-wrap: nowrap; + overflow: hidden; + align-items: center; +} +.generalModel_state .generalModel_state_item .el-cascader__tags .el-tag--light, +.generalModel_state .generalModel_state_item .el-cascader__collapse-tag .el-tag--light { + margin: 0 0 0 0.6rem; + padding-right: 0.5rem; + height: 70%; + --el-icon-size: 1.4rem; + display: flex; +} +.generalModel_state .generalModel_state_item .el-cascader__tags .el-tag--light .el-tag__content, +.generalModel_state .generalModel_state_item .el-cascader__collapse-tag .el-tag--light .el-tag__content { + font-size: 1.4rem; + color: #fff; +} +.generalModel_state .generalModel_state_item .el-cascader__tags .el-cascader__search-input, +.generalModel_state .generalModel_state_item .el-cascader__collapse-tag .el-cascader__search-input { + height: 100%; +} +.generalModel_state .generalModel_state_item .el-cascader__search-input, +.generalModel_state .generalModel_state_item .el-input__inner { + margin: 0; + width: 100%; + height: 4.6rem; + padding-left: 2.1rem; + line-height: 4.6rem; + font-size: 1.8rem; + box-sizing: border-box; +} +.generalModel_state .generalModel_state_item .el-cascader__collapse-tag { + margin-bottom: 0.5rem; +} +.generalModel_state .generalModel_state_item .el-cascader__collapse-tag .el-cascader__collapse-tag .el-tag--light { + display: flex !important; +} +.generalModel_state .generalModel_current { background: #fff; width: 100%; display: flex; align-items: center; justify-content: space-between; } -.generalModel_page .generalModel_table_search .generalModel_state .header_user_content { +.generalModel_state .header_user_content { position: absolute; border: 2px solid; border-radius: 1rem; @@ -664,16 +845,23 @@ li { display: none; margin-left: -2rem; } -.generalModel_page .generalModel_table_search .generalModel_state .header_user_content .username { +.generalModel_state .header_user_content .username { padding: 0 2rem; color: #000; } -.generalModel_page .generalModel_table_search .generalModel_state .header_user_content .username:hover { +.generalModel_state .header_user_content .username:hover { background: #e1e1e1; } -.generalModel_page .generalModel_table_search .generalModel_state .header_user_content.active { +.generalModel_state .header_user_content.active { display: block; } +.ant-select-dropdown { + border: 1px solid #000; + border-radius: 1rem; +} +.ant-select-dropdown .ant-select-item-option-selected:not(.ant-select-item-option-disabled) { + background-color: #f3f3f6; +} .generalModel { -moz-user-select: none; -webkit-user-select: none; @@ -681,19 +869,51 @@ li { -khtml-user-select: none; user-select: none; position: relative; - border-radius: 1rem; - overflow: hidden; + box-shadow: none; + height: calc(65rem*1.2); +} +.generalModel.fullScreen { + max-width: 100%; +} +.generalModel.fullScreen .ant-modal-content { + border-radius: 0rem; +} +.generalModel.fullScreen .ant-modal-body { + padding: 2.5rem 3rem; +} +.generalModel .ant-modal-content { + border-radius: 3rem; + height: 100%; +} +.generalModel .mark_loading[state="true"] { + border-radius: 3rem; } .generalModel .ant-modal-body { padding: 0; - height: calc(65rem*1.2); + height: 100%; + font-size: 1.4rem; padding: calc(5rem*1.2) calc(6rem*1.2); + position: relative; } .generalModel .fi-rr-down-to-line, .generalModel .fi-rr-arrow-small-right, .generalModel .fi-rr-arrow-small-left { font-size: 2rem; } +.generalModel .generalModelTitle { + font-weight: 600; + font-size: 3.5rem; + margin-bottom: 4rem; +} +.generalModel .generalModelInfo { + font-weight: 600; + font-size: 3rem; + margin-bottom: 3rem; +} +.generalModel .generalModelDescription { + font-size: 1.5rem; + font-weight: 400; +} .generalModel .collection_title { position: absolute; top: calc(4rem*1.2); @@ -713,17 +933,26 @@ li { } .generalModel .generalModel_btn .generalModel_closeIcon { position: absolute; - top: calc(2rem*1.2); - right: calc(2rem*1.2); + top: 0; + right: 0; + transform: translate(100%, -100%); cursor: pointer; width: calc(4rem*1.2); height: calc(4rem*1.2); display: flex; align-items: center; justify-content: center; + border-radius: 50%; + border: 1px solid; + z-index: 2; } -.generalModel .generalModel_btn .generalModel_closeIcon.left { - left: calc(2rem*1.2); +@media (max-width: 768px) { + .generalModel .generalModel_btn .generalModel_closeIcon { + transform: translate(-100%, 100%); + } +} +.generalModel .generalModel_btn .generalModel_closeIcon.download { + transform: translate(-100%, 100%); } .generalModel .generalModel_btn .generalModel_closeIcon .fi-rr-cross-small::before { padding: calc(0.2rem*1.2); @@ -747,11 +976,19 @@ li { width: 100%; height: 100%; flex: 1; - padding-bottom: 3rem; background: #fff; border-radius: 2rem; overflow: hidden; } +.generalModel_table_content .ant-table-wrapper, +.generalModel_table_content .ant-spin-nested-loading, +.generalModel_table_content .ant-spin-container { + height: 100%; +} +.generalModel_table_content .ant-spin-container { + display: flex; + flex-direction: column; +} .generalModel_table_content .ant-table { background: transparent; } @@ -783,6 +1020,10 @@ li { .generalModel_table_content .ant-table-pagination-right { padding-right: 3.5rem; } +.generalModel_table_content .ant-table-pagination.ant-pagination { + margin: 0; + margin-top: auto; +} .generalModel_table_content .operate_list { display: flex; align-items: center; @@ -797,99 +1038,6 @@ li { color: #343579; cursor: pointer; } -.generalModelOperate { - display: flex; - flex-direction: column; - border-right: 1px solid #e5e5e5; - position: relative; -} -.generalModelOperate .ant-modal-content { - border-radius: calc(1rem * 1.2); - overflow: hidden; -} -.generalModelOperate .ant-modal-content .ant-modal-header { - background-color: #fff; - border-bottom: none; -} -.generalModelOperate .ant-modal-content .ant-modal-body { - display: flex; - flex-direction: column; - padding: calc(5rem * 1.2) calc(5rem * 1.2) !important; - background: #f9fafb; -} -.generalModelOperate .ant-modal-content .ant-progress-circle.ant-progress-status-success .ant-progress-text { - color: #000; -} -.generalModelOperate .ant-modal-content .ant-progress-circle .ant-progress-text { - color: rgba(0, 0, 0, 0.55); - font-size: calc(1.6rem * 1.2); -} -.generalModelOperate .ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector { - border-color: #d9d9d9; - box-shadow: none; -} -.generalModelOperate .ant-select:hover .ant-select-selector { - border-color: #d9d9d9; -} -.generalModelOperate .generalModelOperate_title { - font-size: var(--aida-fsize2); - font-weight: 900; - color: rgba(0, 0, 0, 0.65); -} -.generalModelOperate .generalModelOperate_closeIcon { - top: calc(2rem * 1.2); - right: calc(2rem * 1.2); - cursor: pointer; - width: calc(4rem * 1.2); - height: calc(4rem * 1.2); - display: flex; - align-items: center; - justify-content: center; - position: absolute; -} -.generalModelOperate .generalModelOperate_closeIcon .fi-rr-cross-small::before { - padding: calc(0.2rem * 1.2); - border-radius: 5px; - border: solid 2px rgba(0, 0, 0, 0.25); - transition: 1s all; - color: rgba(0, 0, 0, 0.55); -} -.generalModelOperate .generalModelOperate_closeIcon.generalModelOperate_closeIcon:hover .fi-rr-cross-small::before { - border: solid 2px rgba(0, 0, 0, 0.55); - color: #000000; -} -.generalModelOperate .generalModelOperate_endBtn { - display: flex; - justify-content: center; -} -.generalModelOperate .generalModelOperate_endBtn > div { - height: 3.2rem; - padding: 4px 1.5rem; - font-size: 1.4rem; - transition: all 0.3s; - border: 1px solid; - cursor: pointer; -} -.generalModelOperate .generalModelOperate_endBtn .generalModelOperate_btn_cancel { - border-color: #d9d9d9; -} -.generalModelOperate .generalModelOperate_endBtn .generalModelOperate_btn_cancel:hover { - color: #39215b; - border-color: #39215b; -} -.generalModelOperate .generalModelOperate_endBtn .generalModelOperate_btn_ok { - margin-left: 10rem; - background: #39215b; - border-color: #39215b; - color: #fff; -} -.generalModelOperate .generalModelOperate_endBtn .generalModelOperate_btn_ok:hover { - border-color: #543087; - background: #543087; -} -.ant-modal-body { - font-size: 1.4rem; -} .operate_file_block { width: 100%; height: 3rem; @@ -959,17 +1107,14 @@ li { .sketchboard_upload_modal .switch_type_list.showEvents * { pointer-events: auto; } -.ant-modal-wrap { - height: 100vh; - overflow: hidden; -} .ant-btn:hover, .ant-btn:focus, .ant-btn:active, .ant-btn::after { - color: #000; + color: #fff; border-color: #000 !important; box-shadow: none !important; + background-color: #000; } .ant-switch-checked { background-color: #000; @@ -1000,11 +1145,11 @@ li { margin: 0 3rem 0 1rem; } .ant-message { - z-index: 1049 !important; + z-index: 9999 !important; top: 6rem; } .ant-modal-confirm-btns .ant-btn:hover { - color: #39215b !important; + color: #fff !important; border-color: #39215b !important; } .ant-modal-confirm-btns .ant-btn-primary { @@ -1017,7 +1162,7 @@ li { background: #543087 !important; } .ant-spin-dot-item { - background-color: #543087; + background-color: #000000; } .ant-spin { color: #000; @@ -1067,21 +1212,57 @@ li { height: 100%; } .ant-checkbox-checked .ant-checkbox-inner { - background-color: #767676; + background-color: #000000; border-color: #d9d9d9 !important; } +.ant-checkbox-indeterminate .ant-checkbox-inner::after { + background-color: #000000; +} .ant-checkbox-wrapper:hover .ant-checkbox-inner, .ant-checkbox:hover .ant-checkbox-inner, .ant-checkbox-input:focus + .ant-checkbox-inner { border-color: #d9d9d9 !important; } +.ant-pagination-item-active { + border-color: #000; +} +.ant-pagination-item-active a { + color: #000; +} +.ant-pagination-item-active:hover { + border-color: #000; +} +.ant-pagination-options-quick-jumper input:hover { + border-color: #000; +} +.ant-pagination-options-quick-jumper input:focus, +.ant-pagination-options-quick-jumper input-focused { + border-color: #000; + box-shadow: none; +} +.ant-pagination-prev:hover .ant-pagination-item-link, +.ant-pagination-next:hover .ant-pagination-item-link { + color: #000; + background-color: #fff; + border: 1px solid #000; +} +.ant-pagination-item:hover { + border: 1px solid #000; +} +.ant-pagination-prev .ant-pagination-item-link, +.ant-pagination-next .ant-pagination-item-link { + background-color: #000; + color: #fff; +} +.ant-pagination-item:hover a { + color: #000; +} .libraryPageCascader { border-radius: 1rem; } .libraryPageCascader .cascader_btn_max { height: 4.5rem; width: 100%; - border-bottom: 1px solid #e1e1e1; display: flex; align-items: center; } @@ -1208,7 +1389,7 @@ li { .admin_page .admin_table_search .admin_state .header_user_content.active { display: block; } -.admin_page .admin_table_content { +.admin_table_content { margin-top: 2.6rem; width: 100%; height: calc(100% - 13.7rem); @@ -1217,93 +1398,71 @@ li { border-radius: 2rem; overflow: hidden; } -.admin_page .admin_table_content .ant-table { +.admin_table_content .ant-table { background: transparent; } -.admin_page .admin_table_content .ant-table-body { +.admin_table_content .ant-table-body { overflow-y: auto !important; -ms-overflow-style: none; overflow: -moz-scrollbars-none; } -.admin_page .admin_table_content .ant-table-body::-webkit-scrollbar { +.admin_table_content .ant-table-body::-webkit-scrollbar { width: 0 !important; } -.admin_page .admin_table_content .ant-table-body::-webkit-scrollbar-horizontal { +.admin_table_content .ant-table-body::-webkit-scrollbar-horizontal { height: 2px !important; width: 2px !important; } -.admin_page .admin_table_content .ant-table-body::-webkit-scrollbar-thumb:horizontal { +.admin_table_content .ant-table-body::-webkit-scrollbar-thumb:horizontal { background-color: #8a8a8a; /* 水平滚动条手柄颜色 */ border-radius: 5px; } -.admin_page .admin_table_content .ant-table-body::-webkit-scrollbar-track:horizontal { +.admin_table_content .ant-table-body::-webkit-scrollbar-track:horizontal { background-color: #f1f1f1; /* 水平滚动条轨道颜色 */ } -.admin_page .admin_table_content .ant-table-thead > tr > th { +.admin_table_content .ant-table-thead > tr > th { background: #ffffff; border-bottom: none; } -.admin_page .admin_table_content .ant-table-tbody > tr > td { +.admin_table_content .ant-table-tbody > tr > td { border: none; background: #fff; } -.admin_page .admin_table_content .operate_list { +.admin_table_content .operate_list { display: flex; align-items: center; justify-content: space-between; padding: 0 1rem; } -.admin_page .admin_table_content .operate_list .operate_item { +.admin_table_content .operate_list .operate_item { font-size: 1.4rem; font-family: Roboto; font-weight: 400; color: #343579; cursor: pointer; } -.admin_page .admin_table_content .ant-table-tbody > tr:hover > td { +.admin_table_content .ant-table-tbody > tr:hover > td { background: #cacaca; } -.admin_page .admin_table_content .ant-table-pagination-right { +.admin_table_content .ant-table-pagination-right { padding-right: 3.5rem; } -.admin_page .admin_table_content .operate_list { +.admin_table_content .operate_list { display: flex; align-items: center; justify-content: space-between; padding: 0 1rem; justify-content: center; } -.admin_page .admin_table_content .operate_list .operate_item { +.admin_table_content .operate_list .operate_item { font-size: 1.4rem; font-family: Roboto; font-weight: 400; color: #343579; cursor: pointer; } -.closeIcon { - position: absolute; - top: calc(2rem*1.2); - right: calc(2rem*1.2); - cursor: pointer; - width: calc(4rem*1.2); - height: calc(4rem*1.2); - display: flex; - align-items: center; - justify-content: center; -} -.closeIcon .fi-rr-cross-small::before { - padding: calc(0.2rem*1.2); - border-radius: 5px; - border: solid 2px rgba(0, 0, 0, 0.25); - transition: 1s all; - color: rgba(0, 0, 0, 0.55); -} -.closeIcon.collection_closeIcon:hover .fi-rr-cross-small::before { - border: solid 2px rgba(0, 0, 0, 0.55); - color: #000000; -} .homeMain_heade .ant-badge, .account_message .ant-badge { width: auto; @@ -1366,129 +1525,12 @@ li { font-weight: 400; color: #000000; } -.collection_modal .ant-modal-body, -.generalModel_modal .ant-modal-body, -.payOrder_modal .ant-modal-body, -.design_detail_modal_component .ant-modal-body, -.designOpenrtion_modal .ant-modal-body, -.library_page .ant-modal-body, -.Export .ant-modal-body, -.productImg_modal .ant-modal-body { - overflow-y: hidden; -} -.collection_modal .ant-upload.ant-upload-select-picture-card, -.generalModel_modal .ant-upload.ant-upload-select-picture-card, -.payOrder_modal .ant-upload.ant-upload-select-picture-card, -.design_detail_modal_component .ant-upload.ant-upload-select-picture-card, -.designOpenrtion_modal .ant-upload.ant-upload-select-picture-card, -.library_page .ant-upload.ant-upload-select-picture-card, -.Export .ant-upload.ant-upload-select-picture-card, -.productImg_modal .ant-upload.ant-upload-select-picture-card { - background: #FFFFFF; - width: calc(6rem*1.2); - height: calc(6rem*1.2); - border: calc(0.3rem*1.2) solid #ededed; - border-radius: calc(1rem*1.2); - margin: 0; -} -.collection_modal .ant-upload.ant-upload-select-picture-card .upload_tip_block .icon-jiahao, -.generalModel_modal .ant-upload.ant-upload-select-picture-card .upload_tip_block .icon-jiahao, -.payOrder_modal .ant-upload.ant-upload-select-picture-card .upload_tip_block .icon-jiahao, -.design_detail_modal_component .ant-upload.ant-upload-select-picture-card .upload_tip_block .icon-jiahao, -.designOpenrtion_modal .ant-upload.ant-upload-select-picture-card .upload_tip_block .icon-jiahao, -.library_page .ant-upload.ant-upload-select-picture-card .upload_tip_block .icon-jiahao, -.Export .ant-upload.ant-upload-select-picture-card .upload_tip_block .icon-jiahao, -.productImg_modal .ant-upload.ant-upload-select-picture-card .upload_tip_block .icon-jiahao { - font-size: calc(3.2rem*1.2); - color: #B7B7B7; -} -.collection_modal .ant-upload.ant-upload-select-picture-card .ant-upload-text, -.generalModel_modal .ant-upload.ant-upload-select-picture-card .ant-upload-text, -.payOrder_modal .ant-upload.ant-upload-select-picture-card .ant-upload-text, -.design_detail_modal_component .ant-upload.ant-upload-select-picture-card .ant-upload-text, -.designOpenrtion_modal .ant-upload.ant-upload-select-picture-card .ant-upload-text, -.library_page .ant-upload.ant-upload-select-picture-card .ant-upload-text, -.Export .ant-upload.ant-upload-select-picture-card .ant-upload-text, -.productImg_modal .ant-upload.ant-upload-select-picture-card .ant-upload-text { - font-size: calc(1.6rem*1.2); - color: #B7B7B7; -} -.collection_modal .ant-upload-list-picture-card-container, -.generalModel_modal .ant-upload-list-picture-card-container, -.payOrder_modal .ant-upload-list-picture-card-container, -.design_detail_modal_component .ant-upload-list-picture-card-container, -.designOpenrtion_modal .ant-upload-list-picture-card-container, -.library_page .ant-upload-list-picture-card-container, -.Export .ant-upload-list-picture-card-container, -.productImg_modal .ant-upload-list-picture-card-container { +.ant-modal div[aria-hidden="true"] { display: none !important; } -.collection_modal .ant-upload-picture-card-wrapper, -.generalModel_modal .ant-upload-picture-card-wrapper, -.payOrder_modal .ant-upload-picture-card-wrapper, -.design_detail_modal_component .ant-upload-picture-card-wrapper, -.designOpenrtion_modal .ant-upload-picture-card-wrapper, -.library_page .ant-upload-picture-card-wrapper, -.Export .ant-upload-picture-card-wrapper, -.productImg_modal .ant-upload-picture-card-wrapper { - width: auto; - vertical-align: top; -} -.designOpenrtion_modal .design_closeIcon, -.designOpenrtionMobile_modal .design_closeIcon, -.design_detail_modal_component .design_closeIcon, -.designElements_modal .design_closeIcon, -.designElementsMobile_modal .design_closeIcon { - top: 2rem; - right: 2rem; - cursor: pointer; - width: 4rem; - height: 4rem; - display: flex; - align-items: center; - justify-content: center; - position: absolute; -} -.designOpenrtion_modal .design_closeIcon .fi-rr-cross-small::before, -.designOpenrtionMobile_modal .design_closeIcon .fi-rr-cross-small::before, -.design_detail_modal_component .design_closeIcon .fi-rr-cross-small::before, -.designElements_modal .design_closeIcon .fi-rr-cross-small::before, -.designElementsMobile_modal .design_closeIcon .fi-rr-cross-small::before { - padding: 0.2rem; - border-radius: 5px; - border: solid 2px rgba(0, 0, 0, 0.25); - transition: 1s all; - color: rgba(0, 0, 0, 0.55); -} -.designOpenrtion_modal .design_closeIcon.collection_closeIcon:hover .fi-rr-cross-small::before, -.designOpenrtionMobile_modal .design_closeIcon.collection_closeIcon:hover .fi-rr-cross-small::before, -.design_detail_modal_component .design_closeIcon.collection_closeIcon:hover .fi-rr-cross-small::before, -.designElements_modal .design_closeIcon.collection_closeIcon:hover .fi-rr-cross-small::before, -.designElementsMobile_modal .design_closeIcon.collection_closeIcon:hover .fi-rr-cross-small::before { - border: solid 2px rgba(0, 0, 0, 0.55); - color: #000000; -} -.design_detail_modal_component .ant-upload-list-picture-card-container, -.designOpenrtion_modal .ant-upload-list-picture-card-container, -.designElements_modal .ant-upload-list-picture-card-container, -.UpgradePlan_modal .ant-upload-list-picture-card-container, -.refund_reason .ant-upload-list-picture-card-container, -.Export .ant-upload-list-picture-card-container, -.designOpenrtionMobile_modal .ant-upload-list-picture-card-container, -.designElementsMobile_modal .ant-upload-list-picture-card-container { +.ant-upload-list-picture-card-container { display: none !important; } -.design_detail_modal_component .ant-upload-picture-card-wrapper, -.designOpenrtion_modal .ant-upload-picture-card-wrapper, -.designElements_modal .ant-upload-picture-card-wrapper, -.UpgradePlan_modal .ant-upload-picture-card-wrapper, -.refund_reason .ant-upload-picture-card-wrapper, -.Export .ant-upload-picture-card-wrapper, -.designOpenrtionMobile_modal .ant-upload-picture-card-wrapper, -.designElementsMobile_modal .ant-upload-picture-card-wrapper { - width: auto; - vertical-align: top; -} .design_detail_modal_component .subitOkPreviewBtn, .designOpenrtion_modal .subitOkPreviewBtn, .designElements_modal .subitOkPreviewBtn, @@ -1531,6 +1573,113 @@ textarea:focus { outline: none; /* 清除默认焦点样式 */ } +.upload_item { + display: flex; + flex-wrap: wrap; +} +.upload_item .upload_file_item { + margin: 0 calc(2rem) calc(2rem) 0; + display: inline-block; + width: calc(10rem); + height: calc(10rem); + border: 1px solid #f5f5f5; + vertical-align: top; + position: relative; + cursor: pointer; + border: none; +} +.upload_item .upload_file_item.active { + opacity: 0.5; + border-radius: calc(1rem*1.2); + transform: scale(0.9); +} +.upload_item .upload_file_item.active .delete_file_block { + pointer-events: none; +} +.upload_item .upload_file_item.active .operate_file_block { + pointer-events: none; +} +.upload_item .upload_file_item.upload_component { + border: none; + display: flex; + align-items: center; + justify-content: center; +} +.upload_item .upload_file_item .ant-upload-picture-card-wrapper.ant-upload-picture-card-wrapper { + position: absolute; + width: auto; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} +.upload_item .upload_file_item .ant-upload-picture-card-wrapper .ant-upload-select-picture-card { + width: calc(6rem*1.2); + height: calc(6rem*1.2); + border: calc(0.3rem*1.2) solid #000; + border-radius: calc(1rem*1.2); + margin: 0; +} +.upload_item .upload_file_item .ant-upload-picture-card-wrapper .ant-upload-select-picture-card .fi-br-upload { + font-size: 2rem; + color: #000; +} +.upload_item .upload_file_item.upload_file_item:last-child { + margin: 0; +} +.upload_item .upload_file_item .upload_img_icon { + width: calc(4.6rem*1.2); +} +.upload_item .upload_file_item .upload_file_item_content { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + width: 100%; + position: relative; +} +.upload_item .upload_file_item .upload_file_item_content:hover div { + opacity: 1; +} +.upload_item .upload_file_item .upload_file_item_content:hover .delete_file_block { + display: block; +} +.upload_item .upload_file_item .upload_file_item_content .upload_img { + display: block; + height: 100%; + width: auto; + max-width: 100%; + object-fit: cover; +} +.upload_item .upload_file_item .upload_file_item_content .delete_file_block { + display: none; + width: 100%; + cursor: pointer; + height: calc(3rem*1.2); + background: rgba(0, 0, 0, 0.2); + font-size: calc(1.6rem*1.2); + color: #ffffff; + line-height: calc(3rem*1.2); + text-align: center; + position: absolute; + left: 0; + bottom: 0; +} +.upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop { + width: calc(3.2rem*1.2); + height: calc(3.2rem*1.2); + background: rgba(0, 0, 0, 0.6); + border-radius: calc(0.4rem*1.2); + position: absolute; + top: calc(0.9rem*1.2); + right: calc(0.9rem*1.2); + text-align: center; + line-height: calc(3.2rem*1.2); + left: auto; +} +.upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop .icon-shanchu { + font-size: calc(1.6rem*1.2); + color: #fff; +} .collection_modal_body .input_border, .design_detail_modal_component .input_border, .library_page .input_border, @@ -1540,12 +1689,11 @@ textarea:focus { z-index: 2; display: flex; align-items: center; - position: sticky; padding-bottom: calc(2rem*1.2); background: #fff; top: 0; flex-wrap: wrap; - --width: 70%; + --width: 65%; } .collection_modal_body .input_border .input_box, .design_detail_modal_component .input_border .input_box, @@ -1609,16 +1757,15 @@ textarea:focus { .productImg_modal .input_border .search_keyword .search_keyword_center, .accountEdit_page .input_border .search_keyword .search_keyword_center, .generalMenu_printModel_upload .input_border .search_keyword .search_keyword_center { + margin-top: 1rem; justify-content: space-between; display: flex; width: var(--width); background-color: #fff; padding: 1rem 2rem; border-radius: 0 0 0.4rem 0.4rem; - border-top: solid 0 #f1f1f1; - border-right: solid 1px #f1f1f1; - border-left: solid 1px #f1f1f1; - border-bottom: solid 1px #f1f1f1; + border: 1px solid; + border-radius: 1rem; max-height: 30rem; overflow-y: scroll; } @@ -1640,8 +1787,7 @@ textarea:focus { .accountEdit_page .input_border .search_keyword .search_keyword_center .search_keyword_center_item, .generalMenu_printModel_upload .input_border .search_keyword .search_keyword_center .search_keyword_center_item { border-radius: 0.4rem; - border: solid 1px #39215b; - background-color: #8156bd; + background-color: #000000; margin-right: 1rem; margin-bottom: 1rem; padding: 0.5rem 1rem; @@ -1664,18 +1810,21 @@ textarea:focus { .productImg_modal .input_border .input_box_btnBox, .accountEdit_page .input_border .input_box_btnBox, .generalMenu_printModel_upload .input_border .input_box_btnBox { - border: calc(0.1rem*1.2) solid #F1F1F1; + border: 1px solid #000; + border-radius: 4rem; width: var(--width); display: flex; float: left; align-items: center; + padding: 1.5rem 2rem; + padding-right: 0; } -.collection_modal_body .input_border .input_box_btnBox .ant-spin-text, -.design_detail_modal_component .input_border .input_box_btnBox .ant-spin-text, -.library_page .input_border .input_box_btnBox .ant-spin-text, -.productImg_modal .input_border .input_box_btnBox .ant-spin-text, -.accountEdit_page .input_border .input_box_btnBox .ant-spin-text, -.generalMenu_printModel_upload .input_border .input_box_btnBox .ant-spin-text { +.collection_modal_body .input_border .input_box_btnBox border .ant-spin-text, +.design_detail_modal_component .input_border .input_box_btnBox border .ant-spin-text, +.library_page .input_border .input_box_btnBox border .ant-spin-text, +.productImg_modal .input_border .input_box_btnBox border .ant-spin-text, +.accountEdit_page .input_border .input_box_btnBox border .ant-spin-text, +.generalMenu_printModel_upload .input_border .input_box_btnBox border .ant-spin-text { font-size: 1.2rem; } .collection_modal_body .input_border .input_box_btnBox .search_seed, @@ -1690,14 +1839,28 @@ textarea:focus { font-size: 1.2rem; border-right: calc(0.1rem*1.2) solid #F1F1F1; } -.collection_modal_body .input_border .upload_item .upload_file_item, -.design_detail_modal_component .input_border .upload_item .upload_file_item, -.library_page .input_border .upload_item .upload_file_item, -.productImg_modal .input_border .upload_item .upload_file_item, -.accountEdit_page .input_border .upload_item .upload_file_item, -.generalMenu_printModel_upload .input_border .upload_item .upload_file_item { - width: 8rem; - height: 8rem; +.collection_modal_body .input_border .input_box_btnBox .upload_item, +.design_detail_modal_component .input_border .input_box_btnBox .upload_item, +.library_page .input_border .input_box_btnBox .upload_item, +.productImg_modal .input_border .input_box_btnBox .upload_item, +.accountEdit_page .input_border .input_box_btnBox .upload_item, +.generalMenu_printModel_upload .input_border .input_box_btnBox .upload_item { + width: 5.7rem; +} +.collection_modal_body .input_border .input_box_btnBox .upload_item .upload_file_item, +.design_detail_modal_component .input_border .input_box_btnBox .upload_item .upload_file_item, +.library_page .input_border .input_box_btnBox .upload_item .upload_file_item, +.productImg_modal .input_border .input_box_btnBox .upload_item .upload_file_item, +.accountEdit_page .input_border .input_box_btnBox .upload_item .upload_file_item, +.generalMenu_printModel_upload .input_border .input_box_btnBox .upload_item .upload_file_item { + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + height: 5.7rem; + width: 5.7rem; + border-radius: 50%; + overflow: hidden; } .collection_modal_body .input_border input, .design_detail_modal_component .input_border input, @@ -1710,7 +1873,9 @@ textarea:focus { border: 1px solid rgba(0, 0, 0, 0.15); padding-left: calc(1.5rem*1.2); border: calc(0.1rem*1.2) solid #ffffff00; - font-size: calc(1.6rem*1.2); + font-size: 1.8rem; + height: 2.5rem; + line-height: 2.5rem; font-weight: 400; } .collection_modal_body .input_border inputinput:-moz-placeholder, @@ -1895,6 +2060,7 @@ textarea:focus { .generalMenu_printModel_upload .input_border .generage_btn_box .content > div { background: #cccccc; line-height: 2; + font-size: 1.8rem; cursor: pointer; white-space: nowrap; overflow: hidden; @@ -1916,211 +2082,9 @@ textarea:focus { .generalMenu_printModel_upload .input_border .generage_btn { margin-left: 2rem; display: flex; -} -.collection_modal_body .upload_item, -.design_detail_modal_component .upload_item, -.library_page .upload_item, -.productImg_modal .upload_item, -.accountEdit_page .upload_item, -.generalMenu_printModel_upload .upload_item { - display: flex; - flex-wrap: wrap; -} -.collection_modal_body .upload_item .upload_file_item, -.design_detail_modal_component .upload_item .upload_file_item, -.library_page .upload_item .upload_file_item, -.productImg_modal .upload_item .upload_file_item, -.accountEdit_page .upload_item .upload_file_item, -.generalMenu_printModel_upload .upload_item .upload_file_item { - margin: 0 calc(2rem*1.2) calc(2rem*1.2) 0; - display: inline-block; - width: calc(10rem*1.2); - height: calc(10rem*1.2); - border: 1px solid #f5f5f5; - vertical-align: top; - position: relative; - cursor: pointer; -} -.collection_modal_body .upload_item .upload_file_item.active, -.design_detail_modal_component .upload_item .upload_file_item.active, -.library_page .upload_item .upload_file_item.active, -.productImg_modal .upload_item .upload_file_item.active, -.accountEdit_page .upload_item .upload_file_item.active, -.generalMenu_printModel_upload .upload_item .upload_file_item.active { - opacity: 0.5; - border-radius: calc(1rem*1.2); - transform: scale(0.9); -} -.collection_modal_body .upload_item .upload_file_item.active .delete_file_block, -.design_detail_modal_component .upload_item .upload_file_item.active .delete_file_block, -.library_page .upload_item .upload_file_item.active .delete_file_block, -.productImg_modal .upload_item .upload_file_item.active .delete_file_block, -.accountEdit_page .upload_item .upload_file_item.active .delete_file_block, -.generalMenu_printModel_upload .upload_item .upload_file_item.active .delete_file_block { - pointer-events: none; -} -.collection_modal_body .upload_item .upload_file_item.active .operate_file_block, -.design_detail_modal_component .upload_item .upload_file_item.active .operate_file_block, -.library_page .upload_item .upload_file_item.active .operate_file_block, -.productImg_modal .upload_item .upload_file_item.active .operate_file_block, -.accountEdit_page .upload_item .upload_file_item.active .operate_file_block, -.generalMenu_printModel_upload .upload_item .upload_file_item.active .operate_file_block { - pointer-events: none; -} -.collection_modal_body .upload_item .upload_file_item.upload_component, -.design_detail_modal_component .upload_item .upload_file_item.upload_component, -.library_page .upload_item .upload_file_item.upload_component, -.productImg_modal .upload_item .upload_file_item.upload_component, -.accountEdit_page .upload_item .upload_file_item.upload_component, -.generalMenu_printModel_upload .upload_item .upload_file_item.upload_component { - border: none; - display: flex; - align-items: center; - justify-content: center; -} -.collection_modal_body .upload_item .upload_file_item :deep(.ant-upload-picture-card-wrapper), -.design_detail_modal_component .upload_item .upload_file_item :deep(.ant-upload-picture-card-wrapper), -.library_page .upload_item .upload_file_item :deep(.ant-upload-picture-card-wrapper), -.productImg_modal .upload_item .upload_file_item :deep(.ant-upload-picture-card-wrapper), -.accountEdit_page .upload_item .upload_file_item :deep(.ant-upload-picture-card-wrapper), -.generalMenu_printModel_upload .upload_item .upload_file_item :deep(.ant-upload-picture-card-wrapper) { - position: absolute; - width: auto; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); -} -.collection_modal_body .upload_item .upload_file_item :deep(.ant-upload-select-picture-card), -.design_detail_modal_component .upload_item .upload_file_item :deep(.ant-upload-select-picture-card), -.library_page .upload_item .upload_file_item :deep(.ant-upload-select-picture-card), -.productImg_modal .upload_item .upload_file_item :deep(.ant-upload-select-picture-card), -.accountEdit_page .upload_item .upload_file_item :deep(.ant-upload-select-picture-card), -.generalMenu_printModel_upload .upload_item .upload_file_item :deep(.ant-upload-select-picture-card) { - width: calc(6rem*1.2); - height: calc(6rem*1.2); - border: calc(0.3rem*1.2) solid #ededed; - border-radius: calc(1rem*1.2); - margin: 0; -} -.collection_modal_body .upload_item .upload_file_item .upload_file_item_content, -.design_detail_modal_component .upload_item .upload_file_item .upload_file_item_content, -.library_page .upload_item .upload_file_item .upload_file_item_content, -.productImg_modal .upload_item .upload_file_item .upload_file_item_content, -.accountEdit_page .upload_item .upload_file_item .upload_file_item_content, -.generalMenu_printModel_upload .upload_item .upload_file_item .upload_file_item_content { - display: flex; - align-items: center; - justify-content: center; - height: 100%; - width: 100%; - position: relative; -} -.collection_modal_body .upload_item .upload_file_item .upload_file_item_content:hover div, -.design_detail_modal_component .upload_item .upload_file_item .upload_file_item_content:hover div, -.library_page .upload_item .upload_file_item .upload_file_item_content:hover div, -.productImg_modal .upload_item .upload_file_item .upload_file_item_content:hover div, -.accountEdit_page .upload_item .upload_file_item .upload_file_item_content:hover div, -.generalMenu_printModel_upload .upload_item .upload_file_item .upload_file_item_content:hover div { - opacity: 1; -} -.collection_modal_body .upload_item .upload_file_item .upload_file_item_content:hover .delete_file_block, -.design_detail_modal_component .upload_item .upload_file_item .upload_file_item_content:hover .delete_file_block, -.library_page .upload_item .upload_file_item .upload_file_item_content:hover .delete_file_block, -.productImg_modal .upload_item .upload_file_item .upload_file_item_content:hover .delete_file_block, -.accountEdit_page .upload_item .upload_file_item .upload_file_item_content:hover .delete_file_block, -.generalMenu_printModel_upload .upload_item .upload_file_item .upload_file_item_content:hover .delete_file_block { - display: block; -} -.collection_modal_body .upload_item .upload_file_item .upload_file_item_content .upload_img, -.design_detail_modal_component .upload_item .upload_file_item .upload_file_item_content .upload_img, -.library_page .upload_item .upload_file_item .upload_file_item_content .upload_img, -.productImg_modal .upload_item .upload_file_item .upload_file_item_content .upload_img, -.accountEdit_page .upload_item .upload_file_item .upload_file_item_content .upload_img, -.generalMenu_printModel_upload .upload_item .upload_file_item .upload_file_item_content .upload_img { - display: block; - height: 100%; - width: auto; - max-width: 100%; - object-fit: cover; -} -.collection_modal_body .upload_item .upload_file_item .upload_file_item_content .delete_file_block, -.design_detail_modal_component .upload_item .upload_file_item .upload_file_item_content .delete_file_block, -.library_page .upload_item .upload_file_item .upload_file_item_content .delete_file_block, -.productImg_modal .upload_item .upload_file_item .upload_file_item_content .delete_file_block, -.accountEdit_page .upload_item .upload_file_item .upload_file_item_content .delete_file_block, -.generalMenu_printModel_upload .upload_item .upload_file_item .upload_file_item_content .delete_file_block { - display: none; - width: 100%; - cursor: pointer; - height: calc(3rem*1.2); - background: rgba(0, 0, 0, 0.2); - font-size: calc(1.6rem*1.2); - color: #ffffff; - line-height: calc(3rem*1.2); - text-align: center; - position: absolute; - left: 0; - bottom: 0; -} -.collection_modal_body .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop, -.design_detail_modal_component .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop, -.library_page .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop, -.productImg_modal .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop, -.accountEdit_page .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop, -.generalMenu_printModel_upload .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop { - width: calc(3.2rem*1.2); - height: calc(3.2rem*1.2); - background: rgba(0, 0, 0, 0.6); - border-radius: calc(0.4rem*1.2); - position: absolute; - top: calc(0.9rem*1.2); - right: calc(0.9rem*1.2); - text-align: center; - line-height: calc(3.2rem*1.2); - left: auto; -} -.collection_modal_body .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop .icon-shanchu, -.design_detail_modal_component .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop .icon-shanchu, -.library_page .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop .icon-shanchu, -.productImg_modal .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop .icon-shanchu, -.accountEdit_page .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop .icon-shanchu, -.generalMenu_printModel_upload .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop .icon-shanchu { - font-size: calc(1.6rem*1.2); - color: #fff; -} -.collection_modal_body .upload_item .upload_file_item .upload_img_icon, -.design_detail_modal_component .upload_item .upload_file_item .upload_img_icon, -.library_page .upload_item .upload_file_item .upload_img_icon, -.productImg_modal .upload_item .upload_file_item .upload_img_icon, -.accountEdit_page .upload_item .upload_file_item .upload_img_icon, -.generalMenu_printModel_upload .upload_item .upload_file_item .upload_img_icon { - width: calc(4.6rem*1.2); -} -.collection_modal_body .upload_item .upload_file_item:last-child, -.design_detail_modal_component .upload_item .upload_file_item:last-child, -.library_page .upload_item .upload_file_item:last-child, -.productImg_modal .upload_item .upload_file_item:last-child, -.accountEdit_page .upload_item .upload_file_item:last-child, -.generalMenu_printModel_upload .upload_item .upload_file_item:last-child { - margin: 0; -} -.generalModel_modal .ant-modal-content { - border-radius: calc(1rem * 1.2); - overflow: hidden; -} -.generalModel_modal .ant-modal-content .ant-modal-header { - background-color: #fff; - border-bottom: none; -} -.generalModel_modal .ant-modal-content .ant-modal-body { - height: calc(65rem * 1.2); -} -.generalModel_modal .ant-modal-content .ant-progress-circle.ant-progress-status-success .ant-progress-text { - color: #000; -} -.generalModel_modal .ant-modal-content .ant-progress-circle .ant-progress-text { - color: rgba(0, 0, 0, 0.55); - font-size: calc(1.6rem * 1.2); + font-size: 1.8rem; + padding: 1rem 2rem; + box-sizing: content-box; } .hideChecked { user-select: none; @@ -2128,14 +2092,6 @@ textarea:focus { -webkit-user-select: none; -ms-user-select: none; } -.cut_pricture_modal .ant-modal-content { - border-radius: 1rem; -} -.cut_pricture_modal .ant-modal-body { - height: calc(65rem*1.2); - padding: 8rem 5rem !important; - overflow-y: hidden; -} .generalScroll { /* 进度 */ /* 轨道 */ @@ -2211,53 +2167,3 @@ textarea:focus { background: #ffffff; color: #000; } -.mark_loading .mark_loading_text { - text-align: center; - font-size: 1.2rem; - position: absolute; - bottom: 2%; - right: 2%; -} -.mark_loading .mark_loading_text div { - margin-top: 10px; -} -.mark_loading .mark_loading_text div span { - margin: 0 5px; - color: red; -} -.mark_loading .mark_loading_title { - font-size: 3rem; - font-weight: 600; - margin-bottom: 2rem; -} -.mark_loading .mark_loading_intro { - color: rgba(0, 0, 0, 0.6); - font-size: 1.4rem; - margin-bottom: 2rem; - text-align: center; - width: 80%; -} -.mark_loading .mark_loading_title_box { - display: flex; -} -.mark_loading .mark_loading_btn, -.mark_loading .mark_loading_btn2 { - display: flex; - margin-top: 10px; - text-align: center; - border: 2px solid; - padding: 0 20px; - border-radius: 10px; - cursor: pointer; - padding: 0.3rem 4rem; - background: #39215b; - color: #fff; - border: none; - margin: 0 2rem; - align-items: center; -} -.mark_loading .mark_loading_btn2 { - border: 2px solid #000; - color: #000; - background: rgba(0, 0, 0, 0); -} diff --git a/src/assets/style/style.less b/src/assets/style/style.less index 3cbac947..59419bf7 100644 --- a/src/assets/style/style.less +++ b/src/assets/style/style.less @@ -6,9 +6,9 @@ html,body,#app{ font-family: 'Roboto', sans-serif; overflow: hidden; // --antd-wave-shadow-color: #341e57; - --aida-fsize2: calc(2.2rem*1.2); - --aida-fsize1-8: calc(1.8rem*1.2); - --aida-fsize1-6: calc(1.6rem*1.2); + --aida-fsize2: calc(2.6rem); + --aida-fsize1-8: calc(1.8rem); + --aida-fsize1-6: calc(1.6rem); --aida-fsize1-4: calc(1.4rem*1.2); --antd-wave-shadow-color:#39215b; } @@ -45,19 +45,6 @@ input:focus{ height: 100%; margin: 0 auto; } -.button_first{ - width: 11.85rem; - text-align: center; - // background: #343579; - height: 4rem; - line-height: 4rem; - font-size: 1.4rem; - font-weight: 400; - color: #000; - cursor: pointer; - border-radius: 1.5rem; - border: 2px solid; -} .button_second{ width: 14rem; text-align: center; @@ -72,13 +59,9 @@ input:focus{ border: 2px solid; } -.system_silder{ - width: 100%; - .ant-slider{ + .ant-slider.system_silder{ margin: 0; - width: 12rem; - - + width: 100%; .ant-slider-rail{ height: 0.6rem; @@ -88,38 +71,32 @@ input:focus{ .ant-slider-track{ height: 0.6rem; border-radius: 0.3rem; - background: #343579; + background: #000; } .ant-slider-handle{ margin-top: -0.4rem; - border: solid 0.2rem #343579; + border: solid 0.2rem #000; } } -} .ant-slider:hover{ - .ant-slider-track{ - background-color: #e1e1e1; - } .ant-slider-handle{ - box-shadow: rgba(41,62,141,.16) 0px 0 0 4px; + box-shadow: rgba(0, 0, 0, 0.16) 0px 0 0 4px; } } .ant-slider-track, .ant-slider-rail { height: calc(.6rem*1.2); - background-color: #e1e1e1; - // background-image: url(@../../../../assets/images/homePage/slider.png); background-size: 100% 100%; border-radius: calc(0.5rem*1.2); } .ant-slider .ant-slider-handle:not(.ant-tooltip-open), .ant-slider-handle { - background-color: #2d2e76 !important; + background-color: #000000 !important; border: none !important; margin-top: -4px; } .ant-slider-handle:hover { - box-shadow: 0 0 0 5px rgba(45, 46, 118, 0.2); + box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.2); } .cliAdmin_like{ animation: adminLike .5s ease-in-out forwards; @@ -166,7 +143,9 @@ input:focus{ padding: 0.6rem 0.5rem; } } - +.ant-modal-mask{ + background-color: #666666; +} .select_block{ height: 4rem; .ant-select{ @@ -194,14 +173,93 @@ input:focus{ padding: 0 1rem; } } +.gallery_input{ + font-size: 1.8rem; + background-color: #f3f3f3; + border: 1px solid #d9d9d9; + border-radius: 4rem; + padding: 2rem; + box-sizing: content-box; + height: 2.5rem; + transition: all .3s; + font-weight: 600; + line-height: 1.5715; +} +.ant-select:not(.ant-select-disabled):hover .ant-select-selector{ + border: 1px solid #000; +} +.ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector{ + box-shadow: none; + border: 1px solid #000; +} +.ant-picker:hover, .ant-picker-focused, .gallery_input:hover{ + border: 1px solid #000; +} +.ant-picker-focused{ + box-shadow: none; + border: 1px solid #000; +} +.ant-picker-suffix{ + display: flex; +} +.ant-picker-range .ant-picker-active-bar{ + background: #353535; +} +.gallery_btn{ + padding: 0 1.8rem; + line-height: 6rem; + border-radius: 4rem; + // line-height: 6rem; + font-size: 1.8rem; + transition: all .3s; + display: inline-block; + color: #fff; + background-color: #000; + text-align: center; + font-weight: 600; + border: 2px solid #000; + cursor: pointer; + box-sizing: border-box; + white-space: nowrap; + &.btnSamil{ + padding: 0rem 2rem; + line-height: 4rem; + font-size: 1.6rem; + } + &.gallery_btn_radius{ + border-radius: 1.4rem; + } + &.gallery_btn:hover{ + background-color: #fff; + color: #000; + } + &.white{ + background-color: #fff; + color: #000; + &.white:hover{ + color: #fff; + background-color: #000; + } + &.active{ + color: #fff; + background-color: #000; + } + } + &.active{ + background-color: #fff; + color: #000; + } + +} + //started公共按钮样式 .started_btn{ padding: 0 calc(1.8rem*1.2); display: inline-block; - border-radius: calc(2rem*1.2); + border-radius: 4rem; font-size: calc(1.2rem*1.2); color: #fff; - background-color: #39215b; + background-color: #000000; cursor: pointer; height: 3.3rem; line-height: 3.3rem; @@ -228,59 +286,16 @@ input:focus{ -.el-cascader{ - font-size: 1.2rem; - width: 100%; - height: 3rem; - --el-color-primary: #d9d9d9; - --el-cascader-tag-background:#e1d9ec; - .el-input{ - height: 100%; - .el-input__wrapper{ - .el-input__inner{ - height: 80% !important; - font-size: 1.2rem; - } - } - } +.el-popper.is-pure{ + border: 1px solid; } .el-popper{ padding: .5rem 1.1rem; -} -.el-cascader__tags,.el-cascader__collapse-tag{ - --el-color-primary: #d9d9d9; - --el-cascader-tag-background:#e1d9ec; - --el-fill-color:#e1d9ec; - height: 100%; - width: 90% !important; - flex-wrap: nowrap; - overflow: hidden; - align-items: center; - .el-tag--light{ - margin: 0 0 0 .6rem; - padding-right: .5rem; - height: 80%; - --el-icon-size: 1.4rem; - display: flex; - .el-tag__content{ - font-size: 1.4rem; - color: #000; - - } - } - .el-cascader__search-input{ - height: 100%; - margin: 0 0 0 1.1rem; - } -} -.el-cascader__collapse-tag{ - margin-bottom: .5rem; - .el-cascader__collapse-tag{ - .el-tag--light{ - display: flex !important; - } + .el-popper__arrow{ + display: none; } } + .hideEvents{ pointer-events:none !important; *{ @@ -467,26 +482,7 @@ input:focus{ } } -.ant-select:not(.ant-select-disabled):hover .ant-select-selector{ - border: 1px solid #d9d9d9; -} -.ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector{ - box-shadow: 0 0 0 2px rgba(83, 83, 83, 0.3); - border: 1px solid #d9d9d9; -} -.ant-picker:hover, .ant-picker-focused{ - border: 1px solid #d9d9d9; -} -.ant-picker-focused{ - box-shadow: 0 0 0 2px rgba(83, 83, 83, 0.3); - border: 1px solid #d9d9d9; -} -.ant-picker-suffix{ - display: flex; -} -.ant-picker-range .ant-picker-active-bar{ - background: #353535; -} + .trial_page{ //Library多级菜单 @@ -585,30 +581,7 @@ input:focus{ } } } -.ant-modal-mask{ - background: linear-gradient(45deg, #eee4f3, #f3f4e6); - // min-width: 1440px; - border-radius: 1rem; - overflow: hidden; - // height: 100%; - height: calc(100% - 7rem); - bottom: 0; - top: auto; - margin: 0 9rem; - // z-index: 10001; -} -//弹窗公共样式 -.ant-modal{ - box-shadow: 0px 0px 6px rgba(0, 0, 0, .2); - div[aria-hidden="true"] {display: none !important;} - &.ant-modal-confirm{ - &.ant-modal-confirm-confirm{ - // top: 50%; - // transform: translateY(-50%); - } - } -} .ant-modal-confirm-confirm{ .ant-modal-content{ border-radius: 1rem; @@ -625,32 +598,128 @@ input:focus{ } } } -.modal_component{ - - &.ant-modal{ - top: 0; - } - .ant-modal-content{ - overflow: hidden; - .ant-modal-header{ - padding: 2.4rem 2.6rem; - background: #F7F7F7; - - .ant-modal-title{ - font-size: 1.8rem; - line-height: 1.8rem; - color: #030303; - } - } - - .ant-modal-body{ - padding: 0; - } - } -} .ant-drawer-content-wrapper{//抽屉 width: 50rem !important; } + +//日期样式 +.ant-picker-time-panel-column > li.ant-picker-time-panel-cell-selected .ant-picker-time-panel-cell-inner{ + background-color: #ededed; +} +.ant-picker-cell-in-view.ant-picker-cell-in-range::before{ + background-color: #ededed; +} +.ant-btn-primary{ + background-color: #000; +} +.ant-picker-range-wrapper{ + border-radius: 2rem; + overflow: hidden; + background-color: #fff; + border: 2px solid #000; + .ant-picker-range-arrow{ + display: none; + } +} +.ant-picker-date-panel .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-start .ant-picker-cell-inner::after, +.ant-picker-date-panel .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-end .ant-picker-cell-inner::after{ + background-color: #ededed; +} +.ant-picker-cell-in-view.ant-picker-cell-today .ant-picker-cell-inner::before{ + border-color: #ededed; +} +.ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover::before, +.ant-picker-cell-in-view.ant-picker-cell-range-start.ant-picker-cell-range-hover::before, +.ant-picker-cell-in-view.ant-picker-cell-range-end.ant-picker-cell-range-hover::before, +.ant-picker-cell-in-view.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single).ant-picker-cell-range-hover-start::before, +.ant-picker-cell-in-view.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single).ant-picker-cell-range-hover-end::before, +.ant-picker-panel > :not(.ant-picker-date-panel) .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-start::before, +.ant-picker-panel > :not(.ant-picker-date-panel) .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-end::before{ + background-color: #ededed; +} +.ant-picker-cell-in-view.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single)::before, .ant-picker-cell-in-view.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single)::before{ + background-color: #ededed; +} +.ant-picker-cell-in-view.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single)::before, .ant-picker-cell-in-view.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single)::before{ + background-color: #ededed; +} +.ant-picker-cell-in-view.ant-picker-cell-selected .ant-picker-cell-inner, +.ant-picker-cell-in-view.ant-picker-cell-range-start .ant-picker-cell-inner, +.ant-picker-cell-in-view.ant-picker-cell-range-end .ant-picker-cell-inner{ + background-color: #000; +} +.ant-picker-cell-in-view.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single):not(.ant-picker-cell-range-start) .ant-picker-cell-inner{ + border-radius: 0 2rem 2rem 0; +} +.ant-picker-cell-in-view.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single):not(.ant-picker-cell-range-end) .ant-picker-cell-inner{ + border-radius: 2rem 0 0 2rem; +} +.ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover::before, +.ant-picker-cell-in-view.ant-picker-cell-range-start.ant-picker-cell-range-hover::before, +.ant-picker-cell-in-view.ant-picker-cell-range-end.ant-picker-cell-range-hover::before, +.ant-picker-cell-in-view.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single).ant-picker-cell-range-hover-start::before, +.ant-picker-cell-in-view.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single).ant-picker-cell-range-hover-end::before, +.ant-picker-panel > :not(.ant-picker-date-panel) .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-start::before, +.ant-picker-panel > :not(.ant-picker-date-panel) .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-end::before{ + background-color: #c9c9c9; +} +tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover:first-child::after, +tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-end:first-child::after, +.ant-picker-cell-in-view.ant-picker-cell-start.ant-picker-cell-range-hover-edge-start.ant-picker-cell-range-hover-edge-start-near-range::after, +.ant-picker-cell-in-view.ant-picker-cell-range-hover-edge-start:not(.ant-picker-cell-range-hover-edge-start-near-range)::after, +.ant-picker-cell-in-view.ant-picker-cell-range-hover-start::after{ + border-left: 1px dashed #c9c9c9; +} +tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover:last-child::after, +tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::after, +.ant-picker-cell-in-view.ant-picker-cell-end.ant-picker-cell-range-hover-edge-end.ant-picker-cell-range-hover-edge-end-near-range::after, +.ant-picker-cell-in-view.ant-picker-cell-range-hover-edge-end:not(.ant-picker-cell-range-hover-edge-end-near-range)::after, +.ant-picker-cell-in-view.ant-picker-cell-range-hover-end::after{ + border-right: 1px dashed #c9c9c9; +} +.ant-picker-cell-in-view.ant-picker-cell-range-hover-start:not(.ant-picker-cell-in-range):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end)::after, +.ant-picker-cell-in-view.ant-picker-cell-range-hover-end:not(.ant-picker-cell-in-range):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end)::after, +.ant-picker-cell-in-view.ant-picker-cell-range-hover-start.ant-picker-cell-range-start-single::after, +.ant-picker-cell-in-view.ant-picker-cell-range-hover-start.ant-picker-cell-range-start.ant-picker-cell-range-end.ant-picker-cell-range-end-near-hover::after, +.ant-picker-cell-in-view.ant-picker-cell-range-hover-end.ant-picker-cell-range-start.ant-picker-cell-range-end.ant-picker-cell-range-start-near-hover::after, +.ant-picker-cell-in-view.ant-picker-cell-range-hover-end.ant-picker-cell-range-end-single::after, +.ant-picker-cell-in-view.ant-picker-cell-range-hover:not(.ant-picker-cell-in-range)::after{ + border-top: 1px dashed #c9c9c9; + border-bottom: 1px dashed #c9c9c9; +} + + + +.ant-select-single.ant-select-show-arrow .ant-select-selection-search{ + height: 2.5rem; + top: 50%; + transform: translateY(-50%); + display: flex; + .ant-select-selection-search-input{ + height: 100% !important; + } +} +.gallerySelect{ + .ant-select-selector{ + height: 2.5rem; + border-radius: 4rem; + padding: 2rem; + box-sizing: content-box; + width: 100%; + box-sizing: border-box; + } + &.ant-select-lg{ + font-size: 1.6rem; + } + &.ant-select-single.ant-select-lg:not(.ant-select-customize-input) .ant-select-selector{ + height: 5.5rem; + } + &.ant-select-single.ant-select-lg:not(.ant-select-customize-input) .ant-select-selector::after, + &.ant-select-single.ant-select-lg:not(.ant-select-customize-input) .ant-select-selector .ant-select-selection-item, + &.ant-select-single.ant-select-lg:not(.ant-select-customize-input) .ant-select-selector .ant-select-selection-placeholder{ + line-height: 5.5rem; + } +} .generalModel_page {//常用查询列表样式 width: 100%; height: 100%; @@ -683,75 +752,191 @@ input:focus{ cursor: pointer; } } - .generalModel_state { - position: relative; - display: flex; - align-items: center; - width: auto; - flex-wrap: wrap; - .generalModel_state_item{ - display: flex; - align-items: center; - margin-right: 5rem; - >span{ - font-size: 2rem; - font-weight: 400; - color: #030303; - margin-right: 15px; - flex-shrink: 0; - display: block; - min-width: 5rem; - text-align: left; + + } +} +.generalModel_state { + position: relative; + display: flex; + align-items: center; + width: auto; + flex-wrap: wrap; + .generalModel_state_item{ + display: flex; + align-items: center; + margin-right: 5rem; + height: 6rem; + &.smail{ + >input{ + padding: 1rem 2rem !important; + } + .ant-picker-range,.ant-select-selector,.range_picker{ + padding: 1rem 2rem !important; + } + .el-cascader{ + padding: 1rem 2rem; + } + + } + >input{ + height: 2.5rem !important; + border-radius: 4rem; + padding: calc(2rem - 1px * 2) !important; + box-sizing: content-box; + background-color: #f3f3f3; + background-color: #fff; + width: calc(100% - 4rem); + font-size: 1.8rem; + transition: all .3s; + border: 1px solid; + } + >input:hover{ + } + >span{ + font-size: 2rem; + font-weight: 400; + color: #030303; + margin-right: 15px; + flex-shrink: 0; + display: block; + min-width: 5rem; + text-align: left; + } + .ant-picker-range,.ant-select-selector,.range_picker{ + height: 2.5rem !important; + border-radius: 4rem; + padding: calc(2rem - 1px * 2) !important; + box-sizing: content-box; + background-color: #f3f3f3; + background-color: #fff; + width: calc(100% - 4rem); + border: 1px solid #000; + } + .ant-picker-input > input{ + font-size: 1.8rem; + } + .ant-select-lg{ + font-size: 1.8rem; + .ant-select-selector{ + .ant-select-selection-item{ + height: 100%; + display: flex; + align-items: center; } - .ant-picker-range{ - height: 5rem; - } - .ant-select-lg{ - font-size: 14px; - .ant-select-selector{ - height: 5rem; - .ant-select-selection-item{ - line-height: 5rem; - } - input{ - line-height: 5rem; - height: 5rem; - } + } + } + + .el-cascader{ + font-size: 1.8rem; + width: 100%; + border: 1px solid #dcdfe6; + border-radius: 4rem; + background-color: #fff; + height: 2.5rem; + padding: 2rem; + transition: all .3s; + box-sizing: content-box; + border: 1px solid; + .el-cascader__tags,.el-input{ + height: 100%; + } + .el-input{ + .el-input__wrapper{ + box-shadow: none; + padding: 0; + width: 100%; + .el-input__inner{ + font-size: 1.8rem; } } } - .generalModel_current{ - background: #fff; - width: 100%; + } + .el-cascader:hover{ + } + .el-cascader__tags{ + padding-left: 1rem; + } + .el-cascader__tags,.el-cascader__collapse-tag{ + --el-color-primary: #d9d9d9; + --el-cascader-tag-background:#000; + --el-fill-color:#e1d9ec; + box-sizing: content-box; + width: 90% !important; + flex-wrap: nowrap; + overflow: hidden; + align-items: center; + .el-tag--light{ + margin: 0 0 0 .6rem; + padding-right: .5rem; + height: 70%; + --el-icon-size: 1.4rem; display: flex; - align-items: center; - justify-content: space-between; + .el-tag__content{ + font-size: 1.4rem; + color: #fff; + } } - .header_user_content { - position: absolute; - border: 2px solid; - border-radius: 1rem; - overflow: hidden; - top: 0; - transform: translateY(6rem); - z-index: 2; - display: none; - margin-left: -2rem; - .username{ - padding: 0 2rem; - color: #000; - } - .username:hover{ - background: #e1e1e1; - } - &.active{ - display: block; + .el-cascader__search-input{ + height: 100%; + } + } + .el-cascader__search-input,.el-input__inner{ + margin: 0; + width: 100%; + height: 4.6rem; + padding-left: 2.1rem; + line-height: 4.6rem; + font-size: 1.8rem; + box-sizing: border-box; + } + .el-cascader__collapse-tag{ + margin-bottom: .5rem; + .el-cascader__collapse-tag{ + .el-tag--light{ + display: flex !important; } } } } + .generalModel_current{ + background: #fff; + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + } + .header_user_content { + position: absolute; + border: 2px solid; + border-radius: 1rem; + overflow: hidden; + top: 0; + transform: translateY(6rem); + z-index: 2; + display: none; + margin-left: -2rem; + .username{ + padding: 0 2rem; + color: #000; + } + .username:hover{ + background: #e1e1e1; + } + &.active{ + display: block; + } + } +} + +//下拉的内容 +.ant-select-dropdown{ + border: 1px solid #000; + border-radius: 1rem; + .ant-select-item-option-selected:not(.ant-select-item-option-disabled){ + background-color: #f3f3f6; + } } - + .generalModel{//自带关闭的页面 -moz-user-select: none; -webkit-user-select: none; @@ -759,21 +944,50 @@ input:focus{ -khtml-user-select: none; user-select: none; position: relative; - border-radius: 1rem; - overflow: hidden; + box-shadow: none; + height: calc(65rem*1.2); + &.fullScreen{ + max-width: 100%; + .ant-modal-content{ + border-radius: 0rem; + } + .ant-modal-body{ + padding: 2.5rem 3rem; + } + } + .ant-modal-content{ + border-radius: 3rem; + height: 100%; + } + .mark_loading{ + &[state="true"] { + border-radius: 3rem; + } + } .ant-modal-body { padding: 0; - // height: calc(65vh - 6.4rem); - height: calc(65rem*1.2); - // background-color: #181818; + height: 100%; + font-size: 1.4rem; padding: calc(5rem*1.2) calc(6rem*1.2); - } - .ant-modal-btn{ - + position: relative; } .fi-rr-down-to-line,.fi-rr-arrow-small-right,.fi-rr-arrow-small-left{ font-size: 2rem; } + .generalModelTitle{ + font-weight: 600; + font-size: 3.5rem; + margin-bottom: 4rem; + } + .generalModelInfo{ + font-weight: 600; + font-size: 3rem; + margin-bottom: 3rem; + } + .generalModelDescription{ + font-size: 1.5rem; + font-weight: 400; + } .collection_title{ position: absolute; top: calc(4rem*1.2); @@ -794,16 +1008,23 @@ input:focus{ .generalModel_btn { .generalModel_closeIcon{ position: absolute; - top: calc(2rem*1.2); - right: calc(2rem*1.2); + top: 0; + right: 0; + transform: translate(100%, -100%); cursor: pointer; width: calc(4rem*1.2); height: calc(4rem*1.2); display: flex; align-items: center; justify-content: center; - &.left{ - left: calc(2rem*1.2); + border-radius: 50%; + border: 1px solid; + z-index: 2; + @media (max-width: 768px) { + transform: translate(-100%, 100%); + } + &.download{ + transform: translate(-100%, 100%); } .fi-rr-cross-small::before{ padding: calc(.2rem*1.2); @@ -831,10 +1052,16 @@ input:focus{ // height: 100%; height: 100%; flex: 1; - padding-bottom: 3rem; background: #fff; border-radius: 2rem; overflow: hidden; + .ant-table-wrapper,.ant-spin-nested-loading,.ant-spin-container{ + height: 100%; + } + .ant-spin-container{ + display: flex; + flex-direction: column; + } .ant-table { background: transparent; } @@ -872,6 +1099,10 @@ input:focus{ .ant-table-pagination-right { padding-right: 3.5rem; } + .ant-table-pagination.ant-pagination{ + margin: 0; + margin-top: auto; + } .operate_list { display: flex; align-items: center; @@ -887,103 +1118,7 @@ input:focus{ } } } -.generalModelOperate{//常用model样式 - display: flex; - flex-direction: column; - border-right: 1px solid #e5e5e5; - position: relative; - .ant-modal-content { - border-radius: calc(1rem * 1.2); - overflow: hidden; - .ant-modal-header { - background-color: #fff; - border-bottom: none; - } - .ant-modal-body { - display: flex; - flex-direction: column; - padding: calc(5rem * 1.2) calc(5rem * 1.2) !important; - // height: calc(65vh - 6.4rem); - background: #f9fafb; - } - //进度完成字体颜色 - .ant-progress-circle.ant-progress-status-success .ant-progress-text { - color: #000; - } - .ant-progress-circle .ant-progress-text { - color: rgba(0, 0, 0, 0.55); - font-size: calc(1.6rem * 1.2); - } - } - .ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector{ - border-color: #d9d9d9; - box-shadow: none; - } - .ant-select:hover .ant-select-selector{ - border-color: #d9d9d9; - } - .generalModelOperate_title { - font-size: var(--aida-fsize2); - font-weight: 900; - color: rgba(0, 0, 0, 0.65); - } - .generalModelOperate_closeIcon { - top: calc(2rem * 1.2); - right: calc(2rem * 1.2); - cursor: pointer; - width: calc(4rem * 1.2); - height: calc(4rem * 1.2); - display: flex; - align-items: center; - justify-content: center; - position: absolute; - .fi-rr-cross-small::before { - padding: calc(0.2rem * 1.2); - border-radius: 5px; - border: solid 2px rgba(0, 0, 0, 0.25); - transition: 1s all; - color: rgba(0, 0, 0, 0.55); - } - &.generalModelOperate_closeIcon:hover .fi-rr-cross-small::before { - border: solid 2px rgba(0, 0, 0, 0.55); - color: rgba(0, 0, 0, 1); - } - } - .generalModelOperate_endBtn{ - display: flex; - justify-content: center; - >div{ - height: 3.2rem; - padding: 4px 1.5rem; - font-size: 1.4rem; - transition: all .3s; - border: 1px solid; - cursor: pointer; - } - .generalModelOperate_btn_cancel{ - border-color: #d9d9d9; - } - .generalModelOperate_btn_cancel:hover{ - color: #39215b; - border-color: #39215b; - } - - .generalModelOperate_btn_ok{ - margin-left: 10rem; - background: #39215b; - border-color: #39215b; - color: #fff; - } - .generalModelOperate_btn_ok:hover{ - border-color: #543087; - background: #543087; - } - } -} -.ant-modal-body{ - font-size: 1.4rem; -} //衣服类型下拉菜单 .operate_file_block{ width: 100%; @@ -1066,10 +1201,10 @@ input:focus{ } } -.ant-modal-wrap{ - height: 100vh; - overflow: hidden; -} +// .ant-modal-wrap{ +// height: 100vh; +// overflow: auto; +// } // .driver-overlay-animated{ // z-index: 10002 !important; // } @@ -1084,9 +1219,10 @@ input:focus{ .ant-btn:focus, .ant-btn:active, .ant-btn::after { - color: #000; + color: #fff; border-color: #000 !important; box-shadow: none !important; + background-color: #000; } .ant-switch-checked { background-color: #000; @@ -1116,12 +1252,12 @@ input:focus{ margin: 0 3rem 0 1rem; } .ant-message{ - z-index: 1049 !important; + z-index: 9999 !important; top: 6rem; } .ant-modal-confirm-btns{ .ant-btn:hover{ - color: #39215b !important; + color: #fff !important; border-color: #39215b !important; } .ant-btn-primary{ @@ -1136,7 +1272,7 @@ input:focus{ } //loding样式 .ant-spin-dot-item{ - background-color: #543087; + background-color: #000000; } .ant-spin{ color: #000; @@ -1187,18 +1323,60 @@ input:focus{ height: 100%; } .ant-checkbox-checked .ant-checkbox-inner{ - background-color: #767676; + background-color: #000000; border-color: #d9d9d9 !important; } +.ant-checkbox-indeterminate .ant-checkbox-inner::after{ + background-color: #000000; +} .ant-checkbox-wrapper:hover .ant-checkbox-inner, .ant-checkbox:hover .ant-checkbox-inner, .ant-checkbox-input:focus + .ant-checkbox-inner{ border-color: #d9d9d9 !important; } + +//分页悬浮样式 +.ant-pagination-item-active { + border-color: #000; + a{ + color: #000; + } + &:hover{ + border-color: #000; + } +} +.ant-pagination-options-quick-jumper input:hover{ + border-color: #000; +} +.ant-pagination-options-quick-jumper input:focus, +.ant-pagination-options-quick-jumper input-focused{ + border-color: #000; + box-shadow: none; +} +.ant-pagination-prev:hover .ant-pagination-item-link, +.ant-pagination-next:hover .ant-pagination-item-link { + color: #000; + background-color: #fff; + border: 1px solid #000; +} +.ant-pagination-item:hover{ + border: 1px solid #000; +} +.ant-pagination-prev, +.ant-pagination-next{ + .ant-pagination-item-link{ + background-color: #000; + color: #fff; + } +} +.ant-pagination-item:hover a{ + color: #000; +} + + .libraryPageCascader{ border-radius: 1rem; .cascader_btn_max{ height: 4.5rem; width: 100%; - border-bottom: 1px solid rgb(225 225 225); display: flex; align-items: center; .cascader_btn1{ @@ -1335,111 +1513,88 @@ input:focus{ } } } +} +.admin_table_content { + margin-top: 2.6rem; + width: 100%; + height: calc(100% - 13.7rem); + padding-bottom: 3rem; + background: #fff; + border-radius: 2rem; + overflow: hidden; + .ant-table { + background: transparent; + } - .admin_table_content { - margin-top: 2.6rem; - width: 100%; - height: calc(100% - 13.7rem); - padding-bottom: 3rem; + .ant-table-body { + overflow-y: auto !important; + -ms-overflow-style: none; + overflow: -moz-scrollbars-none; + &::-webkit-scrollbar { + width: 0 !important; + } + &::-webkit-scrollbar-horizontal { + height: 2px !important; + width: 2px !important; + } + &::-webkit-scrollbar-thumb:horizontal { + background-color: #8a8a8a; /* 水平滚动条手柄颜色 */ + border-radius: 5px; + } + + &::-webkit-scrollbar-track:horizontal { + background-color: #f1f1f1; /* 水平滚动条轨道颜色 */ + } + } + .ant-table-thead > tr > th { + background: #ffffff; + border-bottom: none; + // backdrop-filter: blur(1rem); + } + + .ant-table-tbody > tr > td { + border: none; background: #fff; - border-radius: 2rem; - overflow: hidden; - .ant-table { - background: transparent; - } + // color: #fff; + } + .operate_list{ + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 1rem; - .ant-table-body { - overflow-y: auto !important; - -ms-overflow-style: none; - overflow: -moz-scrollbars-none; - &::-webkit-scrollbar { - width: 0 !important; - } - &::-webkit-scrollbar-horizontal { - height: 2px !important; - width: 2px !important; - } - &::-webkit-scrollbar-thumb:horizontal { - background-color: #8a8a8a; /* 水平滚动条手柄颜色 */ - border-radius: 5px; - } - - &::-webkit-scrollbar-track:horizontal { - background-color: #f1f1f1; /* 水平滚动条轨道颜色 */ - } + .operate_item{ + font-size: 1.4rem; + font-family: Roboto; + font-weight: 400; + color: #343579; + cursor: pointer; } - .ant-table-thead > tr > th { - background: #ffffff; - border-bottom: none; - // backdrop-filter: blur(1rem); + } + .ant-table-tbody > tr { + &:hover > td { + background: rgb(202, 202, 202) } - - .ant-table-tbody > tr > td { - border: none; - background: #fff; - // color: #fff; - } - .operate_list{ - display: flex; - align-items: center; - justify-content: space-between; - padding: 0 1rem; - - .operate_item{ - font-size: 1.4rem; - font-family: Roboto; - font-weight: 400; - color: #343579; - cursor: pointer; - } - } - .ant-table-tbody > tr { - &:hover > td { - background: rgb(202, 202, 202) - } - } - .ant-table-pagination-right { - padding-right: 3.5rem; - } - .operate_list { - display: flex; - align-items: center; - justify-content: space-between; - padding: 0 1rem; - justify-content: center; - .operate_item { - font-size: 1.4rem; - font-family: Roboto; - font-weight: 400; - color: #343579; - cursor: pointer; - } + } + .ant-table-pagination-right { + padding-right: 3.5rem; + } + .operate_list { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 1rem; + justify-content: center; + .operate_item { + font-size: 1.4rem; + font-family: Roboto; + font-weight: 400; + color: #343579; + cursor: pointer; } } } -.closeIcon{ - position: absolute; - top: calc(2rem*1.2); - right: calc(2rem*1.2); - cursor: pointer; - width: calc(4rem*1.2); - height: calc(4rem*1.2); - display: flex; - align-items: center; - justify-content: center; - .fi-rr-cross-small::before{ - padding: calc(.2rem*1.2); - border-radius: 5px; - border: solid 2px rgba(0, 0, 0, 0.25); - transition: 1s all; - color: rgba(0, 0, 0, 0.55); - } - &.collection_closeIcon:hover .fi-rr-cross-small::before{ - border: solid 2px rgba(0, 0, 0, 0.55); - color: rgba(0, 0, 0, 1); - } -} .homeMain_heade,.account_message{ .ant-badge{ width: auto; @@ -1501,73 +1656,14 @@ input:focus{ color: rgba(0,0,0,1); } } -//collection 弹窗 -.collection_modal,.generalModel_modal,.payOrder_modal,.design_detail_modal_component,.designOpenrtion_modal,.library_page,.Export,.productImg_modal{ - - .ant-modal-body{ - overflow-y: hidden; - } - - .ant-upload.ant-upload-select-picture-card{ - background: #FFFFFF; - width: calc(6rem*1.2); - height: calc(6rem*1.2); - border: calc(0.3rem*1.2) solid #ededed; - border-radius: calc(1rem*1.2); - margin: 0; - .upload_tip_block{ - .icon-jiahao{ - font-size: calc(3.2rem*1.2); - color: #B7B7B7; - } - } - - .ant-upload-text{ - font-size: calc(1.6rem*1.2); - color: #B7B7B7; - } - } - .ant-upload-list-picture-card-container{ - display: none !important; - } - .ant-upload-picture-card-wrapper{ - width: auto; - vertical-align: top; - } +.ant-modal{ + div[aria-hidden="true"] {display: none !important;} } -//desing 关闭按钮 -.designOpenrtion_modal,.designOpenrtionMobile_modal,.design_detail_modal_component,.designElements_modal,.designElementsMobile_modal{ - .design_closeIcon{ - top: 2rem; - right: 2rem; - cursor: pointer; - width: 4rem; - height: 4rem; - display: flex; - align-items: center; - justify-content: center; - position: absolute; - .fi-rr-cross-small::before{ - padding: .2rem; - border-radius: 5px; - border: solid 2px rgba(0, 0, 0, 0.25); - transition: 1s all; - color: rgba(0, 0, 0, 0.55); - } - &.collection_closeIcon:hover .fi-rr-cross-small::before{ - border: solid 2px rgba(0, 0, 0, 0.55); - color: rgba(0, 0, 0, 1); - } - } + +.ant-upload-list-picture-card-container{ + display: none !important; } .design_detail_modal_component,.designOpenrtion_modal,.designElements_modal,.UpgradePlan_modal,.refund_reason,.Export,.designOpenrtionMobile_modal,.designElementsMobile_modal{ - .ant-upload-list-picture-card-container{ - display: none !important; - } - .ant-upload-picture-card-wrapper{ - width: auto; - vertical-align: top; - } .subitOkPreviewBtn{ background-color: #38205b; color: #fff; @@ -1607,18 +1703,135 @@ input[type=number]::-webkit-outer-spin-button { textarea:focus{ outline: none; /* 清除默认焦点样式 */ } +.upload_item{ + display: flex; + flex-wrap: wrap; + .upload_file_item { + margin: 0 calc(2rem) calc(2rem) 0; + display: inline-block; + // width: calc(16.5rem); + // height: calc(16.5rem); + width: calc(10rem); + height: calc(10rem); + border: 1px solid #f5f5f5; + vertical-align: top; + position: relative; + cursor: pointer; + border: none; + &.active { + opacity: 0.5; + // border: 2px solid; + border-radius: calc(1rem*1.2); + transform: scale(0.9); + .delete_file_block{ + pointer-events:none; + } + .operate_file_block{ + pointer-events:none; + } + img { + } + } + &.upload_component { + border: none; + display: flex; + align-items: center; + justify-content: center; + } + .ant-upload-picture-card-wrapper{ + &.ant-upload-picture-card-wrapper { + position: absolute; + width: auto; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + .ant-upload-select-picture-card { + width: calc(6rem*1.2); + height: calc(6rem*1.2); + border: calc(0.3rem*1.2) solid #000; + border-radius: calc(1rem*1.2); + margin: 0; + .fi-br-upload{ + font-size: 2rem; + color: #000; + } + } + + + } + &.upload_file_item:last-child{ + margin: 0; + } + .upload_img_icon { + width: calc(4.6rem*1.2); + } + .upload_file_item_content { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + width: 100%; + position: relative; + &:hover div { + opacity: 1; + } + &:hover .delete_file_block { + display: block; + } + + .upload_img { + display: block; + height: 100%; + width: auto; + max-width: 100%; + object-fit: cover; + } + .delete_file_block { + display: none; + width: 100%; + cursor: pointer; + height: calc(3rem*1.2); + background: rgba(0, 0, 0, 0.2); + font-size: calc(1.6rem*1.2); + color: #ffffff; + line-height: calc(3rem*1.2); + text-align: center; + position: absolute; + left: 0; + bottom: 0; + &.rightTop { + width: calc(3.2rem*1.2); + height: calc(3.2rem*1.2); + background: rgba(0, 0, 0, 0.6); + border-radius: calc(0.4rem*1.2); + position: absolute; + top: calc(0.9rem*1.2); + right: calc(0.9rem*1.2); + text-align: center; + line-height: calc(3.2rem*1.2); + left: auto; + .icon-shanchu { + font-size: calc(1.6rem*1.2); + color: #fff; + } + } + } + } + } + +} //设计input和上传按钮样式 .collection_modal_body,.design_detail_modal_component,.library_page,.productImg_modal,.accountEdit_page,.generalMenu_printModel_upload{ .input_border{ z-index: 2; display: flex; align-items: center; - position: sticky; padding-bottom: calc(2rem*1.2); background: #fff; top: 0; flex-wrap: wrap; - --width:70%; + --width:65%; .input_box{ position: relative; z-index: 2; @@ -1647,16 +1860,19 @@ textarea:focus{ height: 0; flex-basis: 100%; .search_keyword_center{ + margin-top: 1rem; justify-content: space-between; display: flex; width: var(--width); background-color: #fff; padding: 1rem 2rem; border-radius: 0 0 .4rem .4rem; - border-top: solid 0 #f1f1f1; - border-right: solid 1px#f1f1f1; - border-left: solid 1px#f1f1f1; - border-bottom: solid 1px#f1f1f1; + // border-top: solid 0 #f1f1f1; + // border-right: solid 1px#f1f1f1; + // border-left: solid 1px#f1f1f1; + // border-bottom: solid 1px#f1f1f1; + border: 1px solid; + border-radius: 1rem; max-height: 30rem; overflow-y: scroll; .search_keyword_center_left{ @@ -1668,8 +1884,7 @@ textarea:focus{ } .search_keyword_center_item{ border-radius: .4rem; - border: solid 1px #39215b; - background-color: #8156bd; + background-color: #000000; margin-right: 1rem; margin-bottom: 1rem; padding: .5rem 1rem; @@ -1684,11 +1899,15 @@ textarea:focus{ } } .input_box_btnBox{ - border: calc(0.1rem*1.2) solid #F1F1F1; + border: 1px solid #000; + border-radius: 4rem; width: var(--width); display: flex; float: left; align-items: center; + padding: 1.5rem 2rem; + padding-right: 0; + border .ant-spin-text{ font-size: 1.2rem; } @@ -1699,13 +1918,21 @@ textarea:focus{ font-size: 1.2rem; border-right: calc(0.1rem* 1.2) solid #F1F1F1; } - } - .upload_item{ - .upload_file_item{ - width: 8rem; - height: 8rem; + .upload_item{ + width: 5.7rem; + .upload_file_item{ + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + height: 5.7rem; + width: 5.7rem; + border-radius: 50%; + overflow: hidden; + } } } + input{ width: 100%; border-radius: calc(.5rem*1.2); @@ -1713,7 +1940,9 @@ textarea:focus{ padding-left: calc(1.5rem*1.2); border: calc(0.1rem*1.2) solid #ffffff00; // border: calc(0.1rem*1.2) solid #F1F1F1; - font-size: calc(1.6rem*1.2); + font-size: 1.8rem; + height: 2.5rem; + line-height: 2.5rem; font-weight: 400; &input:-moz-placeholder{ color: rgba(0,0,0,.15); @@ -1798,6 +2027,7 @@ textarea:focus{ position: relative; display: flex; align-items: center; + .icon-xiala{ margin-left: 1rem; transition: all .3s; @@ -1819,6 +2049,7 @@ textarea:focus{ >div{ background: #cccccc; line-height: 2; + font-size: 1.8rem; cursor: pointer; white-space: nowrap; overflow: hidden; @@ -1833,162 +2064,22 @@ textarea:focus{ // margin: 0 auto; margin-left: 2rem; display: flex; + font-size: 1.8rem; + padding: 1rem 2rem; + box-sizing: content-box; } } - .upload_item{ - display: flex; - flex-wrap: wrap; - .upload_file_item { - margin: 0 calc(2rem*1.2) calc(2rem*1.2) 0; - display: inline-block; - // width: calc(16.5rem*1.2); - // height: calc(16.5rem*1.2); - width: calc(10rem*1.2); - height: calc(10rem*1.2); - border: 1px solid #f5f5f5; - vertical-align: top; - position: relative; - cursor: pointer; - - &.active { - opacity: 0.5; - // border: 2px solid; - border-radius: calc(1rem*1.2); - transform: scale(0.9); - .delete_file_block{ - pointer-events:none; - } - .operate_file_block{ - pointer-events:none; - } - img { - } - } - &.upload_component { - border: none; - display: flex; - align-items: center; - justify-content: center; - } - :deep(.ant-upload-picture-card-wrapper) { - position: absolute; - width: auto; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - } - :deep(.ant-upload-select-picture-card) { - width: calc(6rem*1.2); - height: calc(6rem*1.2); - border: calc(0.3rem*1.2) solid #ededed; - border-radius: calc(1rem*1.2); - margin: 0; - } - .upload_file_item_content { - display: flex; - align-items: center; - justify-content: center; - height: 100%; - width: 100%; - position: relative; - &:hover div { - opacity: 1; - } - &:hover .delete_file_block { - display: block; - } - - .upload_img { - display: block; - height: 100%; - width: auto; - max-width: 100%; - object-fit: cover; - } - .delete_file_block { - display: none; - width: 100%; - cursor: pointer; - height: calc(3rem*1.2); - background: rgba(0, 0, 0, 0.2); - font-size: calc(1.6rem*1.2); - color: #ffffff; - line-height: calc(3rem*1.2); - text-align: center; - position: absolute; - left: 0; - bottom: 0; - &.rightTop { - width: calc(3.2rem*1.2); - height: calc(3.2rem*1.2); - background: rgba(0, 0, 0, 0.6); - border-radius: calc(0.4rem*1.2); - position: absolute; - top: calc(0.9rem*1.2); - right: calc(0.9rem*1.2); - text-align: center; - line-height: calc(3.2rem*1.2); - left: auto; - .icon-shanchu { - font-size: calc(1.6rem*1.2); - color: #fff; - } - } - } - } - - .upload_img_icon { - width: calc(4.6rem*1.2); - } - } - .upload_file_item:last-child{ - margin: 0; - } - } + } -.generalModel_modal{//公共弹窗 - // max-width: 1200px ; - // max-width: 1150px ; - .ant-modal-content { - border-radius: calc(1rem * 1.2); - overflow: hidden; - .ant-modal-header { - background-color: #fff; - border-bottom: none; - } - .ant-modal-body { - // height: calc(65vh - 6.4rem); - height: calc(65rem * 1.2); - } - //进度完成字体颜色 - .ant-progress-circle.ant-progress-status-success .ant-progress-text { - color: #000; - } - .ant-progress-circle .ant-progress-text { - color: rgba(0, 0, 0, 0.55); - font-size: calc(1.6rem * 1.2); - } - } -} .hideChecked{ user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } -//剪裁弹窗 -.cut_pricture_modal{ - .ant-modal-content{ - border-radius: 1rem; - } - .ant-modal-body{ - height: calc(65rem*1.2); - padding: 8rem 5rem !important; - overflow-y: hidden; - } -} + .generalScroll{ &.generalScroll::-webkit-scrollbar { width: calc(1rem*1.2); @@ -2073,61 +2164,4 @@ textarea:focus{ background: rgba(255,255,255, 1); color: #000; } - .mark_loading_text{ - text-align: center; - font-size: 1.2rem; - position: absolute; - bottom: 2%; - right: 2%; - div{ - margin-top: 10px; - span{ - // font-size: 1.8rem; - margin: 0 5px; - color: red; - - } - } - - } - .mark_loading_title{ - font-size: 3rem; - // text-decoration: underline; - font-weight: 600; - margin-bottom: 2rem; - // color: #fff; - } - .mark_loading_intro{ - color: rgba(0, 0, 0, 0.6); - font-size: 1.4rem; - margin-bottom: 2rem; - text-align: center; - width: 80%; - } - .mark_loading_title_box{ - display: flex; - } - - .mark_loading_btn,.mark_loading_btn2{ - // border: #000; - // color: #fff; - display: flex; - margin-top: 10px; - text-align: center; - border: 2px solid; - padding: 0 20px; - border-radius: 10px; - cursor: pointer; - padding: .3rem 4rem; - background: #39215b; - color: #fff; - border: none; - margin: 0 2rem; - align-items: center; - } - .mark_loading_btn2{ - border: 2px solid #000; - color: #000; - background: rgba(0,0,0,0); - } } diff --git a/src/component/Account/account.vue b/src/component/Account/account.vue index c6ec60f7..c001f260 100644 --- a/src/component/Account/account.vue +++ b/src/component/Account/account.vue @@ -4,11 +4,71 @@ -->
+
+
+
+ +
+ + +
+ + +
+ +
+
+
+
+
+
+
{{ userDetail.userName }}
+ +
+
+ + +
+ {{ $t('account.remainingModifications') }}{{ userDetail.usernameModify }}/5 + {{ $t('account.notModifiable') }} {{ userDetail.usernameModify }}/5 +
+
+ {{$t('account.email')}}: +
+
{{ userDetail.email }}
+ +
+
+ + +
+
+
+
+
+ {{$t('account.Follow')}}：{{ userDetail.followeeCount }} +
+
+ {{$t('account.Fans')}}：{{ userDetail.followerCount }} +
+
+
+
+
+ + - diff --git a/src/component/Account/accountFollowFans.vue b/src/component/Account/accountFollowFans.vue index 7df417d3..25b63584 100644 --- a/src/component/Account/accountFollowFans.vue +++ b/src/component/Account/accountFollowFans.vue @@ -1,11 +1,11 @@