From 3c496c263fca58417fa9b35beb9707ad147e6c7d Mon Sep 17 00:00:00 2001
From: wjt <1797368093@qq.com>
Date: 星期一, 22 七月 2024 15:01:33 +0800
Subject: [PATCH] Merge branch 'main' of http://218.28.192.34:9999/r/sqys/sqys_web
---
src/views/main/components/selectColor.vue | 91 +++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 91 insertions(+), 0 deletions(-)
diff --git a/src/views/main/components/selectColor.vue b/src/views/main/components/selectColor.vue
new file mode 100644
index 0000000..8df5a7f
--- /dev/null
+++ b/src/views/main/components/selectColor.vue
@@ -0,0 +1,91 @@
+<template>
+ <div class="select-color">
+ <div class="color red" :class="[selectColor === '#FF0000' ? 'active' : '']" @click="selectColorClick('#FF0000')" />
+ <div
+ class="color green"
+ :class="[selectColor === '#008000' ? 'active' : '']"
+ @click="selectColorClick('#008000')"
+ />
+ <div
+ class="color yellow"
+ :class="[selectColor === '#0000FF' ? 'active' : '']"
+ @click="selectColorClick('#0000FF')"
+ />
+ <div
+ class="gradit-color"
+ :style="{ 'background': `linear-gradient(${selectColor}, ${adjustColor(selectColor, 200)})` }"
+ />
+ </div>
+</template>
+<script>
+export default {
+ props: {
+ selectColor: {
+ type: String,
+ default: '#FF0000'
+ }
+ },
+ methods: {
+ selectColorClick(item) {
+ this.$emit('update:selectColor', item)
+ this.$emit('changeRender')
+ },
+ adjustColor(color, range) {
+ let newColor = '#'
+ for (let i = 0; i < 3; i++) {
+ const hxStr = color.substr(i * 2 + 1, 2)
+ let val = parseInt(hxStr, 16)
+ val += range
+ if (val < 0) val = 0
+ else if (val > 255) val = 255
+ newColor += val.toString(16).padStart(2, '0')
+ }
+ this.$emit('minColor', newColor)
+ return newColor
+ }
+ }
+}
+</script>
+<style scoped>
+.select-color {
+ position: fixed;
+ top: 0;
+ z-index: 100000;
+ padding: 20px;
+}
+
+.title {
+ font-size: 26px;
+ font-weight: 700;
+ margin-bottom: 10px;
+}
+
+.color {
+ width: 100px;
+ height: 100px;
+ margin-bottom: 20px;
+}
+
+.red {
+ background-color: red;
+}
+
+.green {
+ background-color: green;
+}
+
+.yellow {
+ background-color: #0000FF;
+}
+
+.active {
+ border: 2px solid #a0a0a0;
+ box-shadow: 0 0 10px #232323;
+}
+
+.gradit-color {
+ width: 10px;
+ height: 200px;
+ border-radius: 10px;
+}
+</style>
--
Gitblit v1.9.1