canvas
This commit is contained in:
189
src/config/Easing.js
Normal file
189
src/config/Easing.js
Normal file
@@ -0,0 +1,189 @@
|
||||
/* eslint-disable */
|
||||
/**
|
||||
* The Ease class provides a collection of easing functions for use with tween.js.
|
||||
*/
|
||||
const Easing = {
|
||||
Linear: {
|
||||
None: function (amount) {
|
||||
return amount;
|
||||
}
|
||||
},
|
||||
Quadratic: {
|
||||
In: function (amount) {
|
||||
return amount * amount;
|
||||
},
|
||||
Out: function (amount) {
|
||||
return amount * (2 - amount);
|
||||
},
|
||||
InOut: function (amount) {
|
||||
if ((amount *= 2) < 1) {
|
||||
return 0.5 * amount * amount;
|
||||
}
|
||||
return -0.5 * (--amount * (amount - 2) - 1);
|
||||
}
|
||||
},
|
||||
Cubic: {
|
||||
In: function (amount) {
|
||||
return amount * amount * amount;
|
||||
},
|
||||
Out: function (amount) {
|
||||
return --amount * amount * amount + 1;
|
||||
},
|
||||
InOut: function (amount) {
|
||||
if ((amount *= 2) < 1) {
|
||||
return 0.5 * amount * amount * amount;
|
||||
}
|
||||
return 0.5 * ((amount -= 2) * amount * amount + 2);
|
||||
}
|
||||
},
|
||||
Quartic: {
|
||||
In: function (amount) {
|
||||
return amount * amount * amount * amount;
|
||||
},
|
||||
Out: function (amount) {
|
||||
return 1 - --amount * amount * amount * amount;
|
||||
},
|
||||
InOut: function (amount) {
|
||||
if ((amount *= 2) < 1) {
|
||||
return 0.5 * amount * amount * amount * amount;
|
||||
}
|
||||
return -0.5 * ((amount -= 2) * amount * amount * amount - 2);
|
||||
}
|
||||
},
|
||||
Quintic: {
|
||||
In: function (amount) {
|
||||
return amount * amount * amount * amount * amount;
|
||||
},
|
||||
Out: function (amount) {
|
||||
return --amount * amount * amount * amount * amount + 1;
|
||||
},
|
||||
InOut: function (amount) {
|
||||
if ((amount *= 2) < 1) {
|
||||
return 0.5 * amount * amount * amount * amount * amount;
|
||||
}
|
||||
return 0.5 * ((amount -= 2) * amount * amount * amount * amount + 2);
|
||||
}
|
||||
},
|
||||
Sinusoidal: {
|
||||
In: function (amount) {
|
||||
return 1 - Math.cos((amount * Math.PI) / 2);
|
||||
},
|
||||
Out: function (amount) {
|
||||
return Math.sin((amount * Math.PI) / 2);
|
||||
},
|
||||
InOut: function (amount) {
|
||||
return 0.5 * (1 - Math.cos(Math.PI * amount));
|
||||
}
|
||||
},
|
||||
Exponential: {
|
||||
In: function (amount) {
|
||||
return amount === 0 ? 0 : Math.pow(1024, amount - 1);
|
||||
},
|
||||
Out: function (amount) {
|
||||
return amount === 1 ? 1 : 1 - Math.pow(2, -10 * amount);
|
||||
},
|
||||
InOut: function (amount) {
|
||||
if (amount === 0) {
|
||||
return 0;
|
||||
}
|
||||
if (amount === 1) {
|
||||
return 1;
|
||||
}
|
||||
if ((amount *= 2) < 1) {
|
||||
return 0.5 * Math.pow(1024, amount - 1);
|
||||
}
|
||||
return 0.5 * (-Math.pow(2, -10 * (amount - 1)) + 2);
|
||||
}
|
||||
},
|
||||
Circular: {
|
||||
In: function (amount) {
|
||||
return 1 - Math.sqrt(1 - amount * amount);
|
||||
},
|
||||
Out: function (amount) {
|
||||
return Math.sqrt(1 - --amount * amount);
|
||||
},
|
||||
InOut: function (amount) {
|
||||
if ((amount *= 2) < 1) {
|
||||
return -0.5 * (Math.sqrt(1 - amount * amount) - 1);
|
||||
}
|
||||
return 0.5 * (Math.sqrt(1 - (amount -= 2) * amount) + 1);
|
||||
}
|
||||
},
|
||||
Elastic: {
|
||||
In: function (amount) {
|
||||
if (amount === 0) {
|
||||
return 0;
|
||||
}
|
||||
if (amount === 1) {
|
||||
return 1;
|
||||
}
|
||||
return -Math.pow(2, 10 * (amount - 1)) * Math.sin((amount - 1.1) * 5 * Math.PI);
|
||||
},
|
||||
Out: function (amount) {
|
||||
if (amount === 0) {
|
||||
return 0;
|
||||
}
|
||||
if (amount === 1) {
|
||||
return 1;
|
||||
}
|
||||
return Math.pow(2, -10 * amount) * Math.sin((amount - 0.1) * 5 * Math.PI) + 1;
|
||||
},
|
||||
InOut: function (amount) {
|
||||
if (amount === 0) {
|
||||
return 0;
|
||||
}
|
||||
if (amount === 1) {
|
||||
return 1;
|
||||
}
|
||||
amount *= 2;
|
||||
if (amount < 1) {
|
||||
return -0.5 * Math.pow(2, 10 * (amount - 1)) * Math.sin((amount - 1.1) * 5 * Math.PI);
|
||||
}
|
||||
return 0.5 * Math.pow(2, -10 * (amount - 1)) * Math.sin((amount - 1.1) * 5 * Math.PI) + 1;
|
||||
}
|
||||
},
|
||||
Back: {
|
||||
In: function (amount) {
|
||||
var s = 1.70158;
|
||||
return amount * amount * ((s + 1) * amount - s);
|
||||
},
|
||||
Out: function (amount) {
|
||||
var s = 1.70158;
|
||||
return --amount * amount * ((s + 1) * amount + s) + 1;
|
||||
},
|
||||
InOut: function (amount) {
|
||||
var s = 1.70158 * 1.525;
|
||||
if ((amount *= 2) < 1) {
|
||||
return 0.5 * (amount * amount * ((s + 1) * amount - s));
|
||||
}
|
||||
return 0.5 * ((amount -= 2) * amount * ((s + 1) * amount + s) + 2);
|
||||
}
|
||||
},
|
||||
Bounce: {
|
||||
In: function (amount) {
|
||||
return 1 - Easing.Bounce.Out(1 - amount);
|
||||
},
|
||||
Out: function (amount) {
|
||||
if (amount < 1 / 2.75) {
|
||||
return 7.5625 * amount * amount;
|
||||
}
|
||||
else if (amount < 2 / 2.75) {
|
||||
return 7.5625 * (amount -= 1.5 / 2.75) * amount + 0.75;
|
||||
}
|
||||
else if (amount < 2.5 / 2.75) {
|
||||
return 7.5625 * (amount -= 2.25 / 2.75) * amount + 0.9375;
|
||||
}
|
||||
else {
|
||||
return 7.5625 * (amount -= 2.625 / 2.75) * amount + 0.984375;
|
||||
}
|
||||
},
|
||||
InOut: function (amount) {
|
||||
if (amount < 0.5) {
|
||||
return Easing.Bounce.In(amount * 2) * 0.5;
|
||||
}
|
||||
return Easing.Bounce.Out(amount * 2 - 1) * 0.5 + 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default Easing
|
||||
BIN
src/images/che.png
Normal file
BIN
src/images/che.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.6 KiB |
BIN
src/images/che1.png
Normal file
BIN
src/images/che1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
148
src/pages/canvas.vue
Normal file
148
src/pages/canvas.vue
Normal file
@@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<div class="canvas-wrap">
|
||||
<canvas id="lineCanvas" width="400" height="500"></canvas>
|
||||
<canvas id="carCanvas" width="400" height="500"></canvas>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Easing from '@config/Easing.js'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
keyPoints: [{x: 160, y: 200}, {x: 60, y: 200}, {x: 60, y: 400}, {x: 160, y: 400}]
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
setTimeout(() => {
|
||||
this.handleCanvasLine()
|
||||
}, 5000)
|
||||
setTimeout(() => {
|
||||
this.handleCanvasCar()
|
||||
}, 5900)
|
||||
},
|
||||
methods: {
|
||||
handleCanvasLine () {
|
||||
const canvas = document.querySelector('#lineCanvas')
|
||||
const ctx = canvas.getContext('2d')
|
||||
let img = new Image()
|
||||
img.src = require('../images/che.png')
|
||||
// 设置线条样式
|
||||
ctx.lineWidth = 1
|
||||
ctx.lineJoin = 'round'
|
||||
ctx.lineCap = 'round'
|
||||
let prevX = this.keyPoints[0].x
|
||||
let prevY = this.keyPoints[0].y
|
||||
let nextX
|
||||
let nextY
|
||||
// 第一帧执行的时间
|
||||
let startTime
|
||||
// 期望动画持续的时间
|
||||
const duration = 900
|
||||
// 动画被切分成若干段,每一段所占总进度的比例
|
||||
const partProportion = 1 / (this.keyPoints.length - 1)
|
||||
// 缓存绘制第n段线段的n值,为了在进行下一段绘制前把这一段线段的末尾补齐
|
||||
let lineIndexCache = 1
|
||||
// 动画帧绘制方法currentTime是requestAnimation执行回调方法step时会传入的一个执行时的时间(由performance.now()获得).
|
||||
const step = (currentTime) => {
|
||||
// 第一帧绘制时记录下开始的时间
|
||||
!startTime && (startTime = currentTime)
|
||||
// 已经过去的时间(ms)
|
||||
const timeElapsed = currentTime - startTime
|
||||
// 动画执行的进度 {0,1}
|
||||
let progress = Math.min(timeElapsed / duration, 1)
|
||||
// 加入二次方缓动函数
|
||||
progress = Easing.Quadratic.In(progress)
|
||||
// 描述当前所绘制的是第几段线段
|
||||
const lineIndex = Math.min(Math.floor(progress / partProportion) + 1, this.keyPoints.length - 1)
|
||||
// 当前线段的进度 {0,1}
|
||||
const partProgress = (progress - (lineIndex - 1) * partProportion) / partProportion
|
||||
// 绘制方法
|
||||
const draw = () => {
|
||||
ctx.strokeStyle = `rgba(${81 + 175 * Math.abs(1 - progress * 2)}, ${160 - 160 * Math.abs(progress * 2 - 1)}, ${255},${1})`
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(prevX, prevY)
|
||||
// 当绘制下一段线段前,把上一段末尾缺失的部分补齐
|
||||
if (lineIndex !== lineIndexCache) {
|
||||
ctx.lineTo(this.keyPoints[lineIndex - 1].x, this.keyPoints[lineIndex - 1].y)
|
||||
lineIndexCache = lineIndex
|
||||
}
|
||||
prevX = nextX = ~~(this.keyPoints[lineIndex - 1].x + ((this.keyPoints[lineIndex]).x - this.keyPoints[lineIndex - 1].x) * partProgress)
|
||||
prevY = nextY = ~~(this.keyPoints[lineIndex - 1].y + ((this.keyPoints[lineIndex]).y - this.keyPoints[lineIndex - 1].y) * partProgress)
|
||||
ctx.lineTo(nextX, nextY)
|
||||
ctx.stroke()
|
||||
}
|
||||
draw()
|
||||
if (progress < 1) {
|
||||
requestAnimationFrame(step)
|
||||
} else {
|
||||
console.log('动画执行完毕')
|
||||
}
|
||||
}
|
||||
requestAnimationFrame(step)
|
||||
},
|
||||
handleCanvasCar () {
|
||||
const canvas = document.querySelector('#carCanvas')
|
||||
const ctx = canvas.getContext('2d')
|
||||
let img = new Image()
|
||||
img.src = require('../images/che.png')
|
||||
let nextX
|
||||
let nextY
|
||||
// 第一帧执行的时间
|
||||
let startTime
|
||||
// 期望动画持续的时间
|
||||
const duration = 2000
|
||||
// 动画被切分成若干段,每一段所占总进度的比例
|
||||
const partProportion = 1 / (this.keyPoints.length - 1)
|
||||
// 缓存绘制第n段线段的n值,为了在进行下一段绘制前把这一段线段的末尾补齐
|
||||
// 动画帧绘制方法currentTime是requestAnimation执行回调方法step时会传入的一个执行时的时间(由performance.now()获得).
|
||||
const step = (currentTime) => {
|
||||
// 第一帧绘制时记录下开始的时间
|
||||
!startTime && (startTime = currentTime)
|
||||
// 已经过去的时间(ms)
|
||||
const timeElapsed = currentTime - startTime
|
||||
// 动画执行的进度 {0,1}
|
||||
let progress = Math.min(timeElapsed / duration, 1)
|
||||
// 加入二次方缓动函数
|
||||
progress = Easing.Quadratic.In(progress)
|
||||
// 描述当前所绘制的是第几段线段
|
||||
const lineIndex = Math.min(Math.floor(progress / partProportion) + 1, this.keyPoints.length - 1)
|
||||
// 当前线段的进度 {0,1}
|
||||
const partProgress = (progress - (lineIndex - 1) * partProportion) / partProportion
|
||||
// 绘制方法
|
||||
const draw = () => {
|
||||
ctx.beginPath()
|
||||
ctx.clearRect(0, 0, 400, 500)
|
||||
nextX = ~~(this.keyPoints[lineIndex - 1].x + ((this.keyPoints[lineIndex]).x - this.keyPoints[lineIndex - 1].x) * partProgress)
|
||||
nextY = ~~(this.keyPoints[lineIndex - 1].y + ((this.keyPoints[lineIndex]).y - this.keyPoints[lineIndex - 1].y) * partProgress)
|
||||
ctx.drawImage(img, nextX - 15, nextY - 50, 30, 50)
|
||||
}
|
||||
draw()
|
||||
if (progress < 1) {
|
||||
requestAnimationFrame(step)
|
||||
} else {
|
||||
console.log('动画执行完毕')
|
||||
}
|
||||
}
|
||||
requestAnimationFrame(step)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.canvas-wrap
|
||||
position relative
|
||||
width 100%
|
||||
height 100%
|
||||
#lineCanvas
|
||||
position absolute
|
||||
left 0
|
||||
top 0
|
||||
z-index 10
|
||||
#carCanvas
|
||||
position absolute
|
||||
left 0
|
||||
top 0
|
||||
z-index 11
|
||||
</style>
|
||||
@@ -1,111 +1,147 @@
|
||||
<template>
|
||||
<div class="zd-row contianer">
|
||||
<div class="zd-col-8 l-wrap">
|
||||
<div class="zd-row filter-item border-b-0">
|
||||
<div class="zd-col-10 filter-label">站点</div>
|
||||
<div class="zd-col-13 filter-value">10-10-1</div>
|
||||
</div>
|
||||
<div class="zd-row filter-item">
|
||||
<div class="zd-col-10 filter-label">目标站点</div>
|
||||
<div class="zd-col-13 filter-value">
|
||||
<el-select v-model="value" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<div class="contianer">
|
||||
<div class="zd-row content">
|
||||
<div class="l-wrap">
|
||||
<div class="zd-row">
|
||||
<div class="zd-col-24 filter-name">站点：10-10-1</div>
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="zd-row filter-item">
|
||||
<div class="zd-col-10 filter-label">目标站点</div>
|
||||
<div class="zd-col-13 filter-value">
|
||||
<el-select v-model="value" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="zd-row filter-item">
|
||||
<div class="zd-col-10 filter-label">物料类型</div>
|
||||
<div class="zd-col-13 filter-value">
|
||||
<el-select v-model="value" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="zd-row jcflexend button-wrap">
|
||||
<button class="button btn-primary">确认下料</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="zd-row filter-item">
|
||||
<div class="zd-col-10 filter-label">区域</div>
|
||||
<div class="zd-col-13 filter-value">
|
||||
<el-select v-model="value" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="zd-row jcflexend button-wrap">
|
||||
<button class="button btn-primary">区域管控</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="zd-row filter-item">
|
||||
<div class="zd-col-24 filter-value">
|
||||
<el-select v-model="value" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="zd-row button-wrap">
|
||||
<button class="zd-col-4 button button_s btn-primary">取消</button>
|
||||
<button class="zd-col-6 button button_s btn-primary">强制完成</button>
|
||||
<button class="zd-col-6 button button_s btn-primary">放货确认</button>
|
||||
<button class="zd-col-6 button button_s btn-primary" @click="handleCanvasBG">卸货确认</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="zd-row filter-item">
|
||||
<div class="zd-col-10 filter-label">物料类型</div>
|
||||
<div class="zd-col-13 filter-value">
|
||||
<el-select v-model="value" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="zd-row jcflexend button-wrap">
|
||||
<button class="button btn-primary">确认下料</button>
|
||||
</div>
|
||||
<div class="zd-row filter-item">
|
||||
<div class="zd-col-10 filter-label">区域</div>
|
||||
<div class="zd-col-13 filter-value">
|
||||
<el-select v-model="value" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="zd-row jcflexend button-wrap">
|
||||
<button class="button btn-primary">区域管控</button>
|
||||
</div>
|
||||
<div class="zd-row filter-item">
|
||||
<div class="zd-col-24 filter-value">
|
||||
<el-select v-model="value" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="zd-row button-wrap">
|
||||
<button class="zd-col-6_w button button_s btn-primary">取消</button>
|
||||
<button class="zd-col-6_w button button_s btn-primary">强制完成</button>
|
||||
<button class="zd-col-6_w button button_s btn-primary">放货确认</button>
|
||||
<button class="zd-col-6_w button button_s btn-primary">卸货确认</button>
|
||||
<div class="r-wrap" @click="rectClick">
|
||||
<t-canvas></t-canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div class="zd-col-16 r-wrap"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TCanvas from './canvas.vue'
|
||||
export default {
|
||||
components: {
|
||||
TCanvas
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
options: [{
|
||||
value: '选项1',
|
||||
label: '黄金糕'
|
||||
}],
|
||||
value: ''
|
||||
value: '',
|
||||
points: [[160, 200], [60, 200], [60, 400], [160, 400]],
|
||||
mapCoordinateList: [{x: 160, y: 200}, {x: 60, y: 200}, {x: 60, y: 400}, {x: 160, y: 400}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
rectClick () {
|
||||
var ev = window.event
|
||||
// 获取相对于当前所指向对象的位置坐标
|
||||
alert('x:' + ev.offsetX + 'y:' + ev.offsetY)
|
||||
},
|
||||
// handleCanvasBG () {
|
||||
// this.points.forEach(([x, y]) => {
|
||||
// this.drawDot(x, y)
|
||||
// })
|
||||
// },
|
||||
// drawDot (x1, y1, r) {
|
||||
// const myContext = document.getElementById('canvasBG')
|
||||
// const ctx = myContext.getContext('2d')
|
||||
// // ctx.save()
|
||||
// ctx.beginPath()
|
||||
// ctx.fillStyle = 'red'
|
||||
// ctx.arc(x1, y1, r)
|
||||
// },
|
||||
handleCanvasBG () {
|
||||
const myContext = document.getElementById('canvasBG')
|
||||
const ctx = myContext.getContext('2d')
|
||||
ctx.beginPath()
|
||||
this.mapCoordinateList.forEach((item, index) => {
|
||||
if (index + 1 < this.mapCoordinateList.length) {
|
||||
ctx.moveTo(item.x, item.y)
|
||||
ctx.lineTo(this.mapCoordinateList[index + 1].x, this.mapCoordinateList[index + 1].y)
|
||||
ctx.strokeStyle = 'yellow'
|
||||
ctx.lineWidth = '20'
|
||||
ctx.lineCap = 'round'
|
||||
} else {
|
||||
// ctx.moveTo(item.x, item.y)
|
||||
// ctx.lineTo(this.mapCoordinateList[0].x, this.mapCoordinateList[0].y)
|
||||
}
|
||||
})
|
||||
ctx.stroke()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@style/mixin'
|
||||
.contianer
|
||||
_wh(100vw, 100vh)
|
||||
.l-wrap
|
||||
height 100%
|
||||
padding 1%
|
||||
.r-wrap
|
||||
height 100%
|
||||
padding 1%
|
||||
.zd-col-6_w
|
||||
width 24%
|
||||
.filter-item
|
||||
height 50px
|
||||
border-bottom 2px solid #fff
|
||||
.border-b-0
|
||||
border-bottom 0
|
||||
.filter-label
|
||||
_font(14px, 50px, #fff,,)
|
||||
.filter-value
|
||||
_font(16px, 50px, #fff,,right)
|
||||
// @import '~@style/mixin'
|
||||
#canvasBG
|
||||
background-color: #999
|
||||
</style>
|
||||
|
||||
@@ -11,15 +11,31 @@
|
||||
font-size: 16px;
|
||||
}
|
||||
.el-input__inner {
|
||||
height 50px;
|
||||
line-height: 50px;
|
||||
height 40px;
|
||||
font-size: 14px;
|
||||
line-height: 40px;
|
||||
// text-align: right;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
color: #fff;
|
||||
color: #b0c7e8;
|
||||
}
|
||||
.el-select-dropdown__item {
|
||||
// text-align: right;
|
||||
color: #b0c7e8;
|
||||
}
|
||||
.el-select-dropdown {
|
||||
border-color: #47567d;
|
||||
background-color: #47567d;
|
||||
}
|
||||
.el-popper[x-placement^=bottom] .popper__arrow::after {
|
||||
border-bottom-color: #47567d;
|
||||
}
|
||||
.el-popper[x-placement^=bottom] .popper__arrow {
|
||||
border-bottom-color: #47567d;
|
||||
}
|
||||
|
||||
.button-wrap {
|
||||
margin: 30px 0 50px 0;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.button {
|
||||
@@ -29,13 +45,36 @@
|
||||
padding: 0 10px
|
||||
border: 1px solid #fff;
|
||||
border-radius: 10px;
|
||||
background-color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
.button_s {
|
||||
font-size: 12px;
|
||||
padding: 0 2px
|
||||
}
|
||||
.btn-primary {
|
||||
background-color: #14A3F3;
|
||||
border-color: #14A3F3;
|
||||
background: linear-gradient(0deg, #005ad2, #00a0ec);
|
||||
border-color: #083a7e;
|
||||
}
|
||||
.contianer
|
||||
_wh(100vw, 100vh)
|
||||
padding 2%
|
||||
.content
|
||||
_wh(100%, 100%)
|
||||
.l-wrap
|
||||
_wh(34%, 100%)
|
||||
.r-wrap
|
||||
_wh(65%, 100%)
|
||||
background: linear-gradient(90deg, #213a62, #243a63);
|
||||
border-radius: 10px;
|
||||
.item-wrap
|
||||
width 100%
|
||||
padding 15px 8px
|
||||
background: linear-gradient(90deg, #213a62, #243a63);
|
||||
border-radius: 10px;
|
||||
margin-top: 20px;
|
||||
.filter-name
|
||||
_font(18px, 18px, #fff, 700,)
|
||||
.filter-label
|
||||
_font(16px, 40px, #cee4ff,,)
|
||||
.filter-value
|
||||
_font(14px, 40px, #b0c7e8,,right)
|
||||
@@ -17,7 +17,7 @@ body, html {
|
||||
-webkit-user-select: auto;
|
||||
-ms-user-select: auto;
|
||||
user-select: auto;
|
||||
background-color: #1058A0;
|
||||
background: linear-gradient(358deg, #031229,#1d2b48,#0a122c);
|
||||
}
|
||||
|
||||
input[type="button"], input[type="submit"], input[type="search"], input[type="reset"], textarea, select{
|
||||
|
||||
Reference in New Issue
Block a user