|
@@ -0,0 +1,784 @@
|
|
|
+<template>
|
|
|
+ <view v-show="show" class="t-wrapper" @touchmove.stop.prevent="moveHandle">
|
|
|
+ <view class="t-mask" :class="{active:active}" @click.stop="close"></view>
|
|
|
+ <view class="t-box" :class="{active:active}">
|
|
|
+ <view class="t-header">
|
|
|
+ <view class="t-header-button" @click="close">取消</view>
|
|
|
+ <view class="t-header-button" @click="confirm">确认</view>
|
|
|
+ </view>
|
|
|
+ <view class="t-color__box" :style="{ background: 'rgb(' + bgcolor.r + ',' + bgcolor.g + ',' + bgcolor.b + ')'}">
|
|
|
+ <view class="t-background boxs" @touchstart="touchstart($event, 0)" @touchmove="touchmove($event, 0)" @touchend="touchend($event, 0)">
|
|
|
+ <view class="t-color-mask"></view>
|
|
|
+ <view class="t-pointer" :style="{ top: site[0].top - 8 + 'px', left: site[0].left - 8 + 'px' }"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="t-control__box">
|
|
|
+ <view class="t-control__color">
|
|
|
+ <view class="t-control__color-content" :style="{ background: 'rgba(' + rgba.r + ',' + rgba.g + ',' + rgba.b + ',' + rgba.a + ')' }"></view>
|
|
|
+ </view>
|
|
|
+ <view class="t-control-box__item">
|
|
|
+ <view class="t-controller boxs" @touchstart="touchstart($event, 1)" @touchmove="touchmove($event, 1)" @touchend="touchend($event, 1)">
|
|
|
+ <view class="t-hue">
|
|
|
+ <view class="t-circle" :style="{ left: site[1].left - 12 + 'px' }"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="t-controller boxs" @touchstart="touchstart($event, 2)" @touchmove="touchmove($event, 2)" @touchend="touchend($event, 2)">
|
|
|
+ <view class="t-transparency">
|
|
|
+ <view class="t-circle" :style="{ left: site[2].left - 12 + 'px' }"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="t-result__box">
|
|
|
+ <view v-if="mode" class="t-result__item">
|
|
|
+ <view class="t-result__box-input">{{hex}}</view>
|
|
|
+ <view class="t-result__box-text">HEX</view>
|
|
|
+ </view>
|
|
|
+ <template v-else>
|
|
|
+ <view class="t-result__item">
|
|
|
+ <view class="t-result__box-input">{{rgba.r}}</view>
|
|
|
+ <view class="t-result__box-text">R</view>
|
|
|
+ </view>
|
|
|
+ <view class="t-result__item">
|
|
|
+ <view class="t-result__box-input">{{rgba.g}}</view>
|
|
|
+ <view class="t-result__box-text">G</view>
|
|
|
+ </view>
|
|
|
+ <view class="t-result__item">
|
|
|
+ <view class="t-result__box-input">{{rgba.b}}</view>
|
|
|
+ <view class="t-result__box-text">B</view>
|
|
|
+ </view>
|
|
|
+ <view class="t-result__item">
|
|
|
+ <view class="t-result__box-input">{{rgba.a}}</view>
|
|
|
+ <view class="t-result__box-text">A</view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <view class="t-result__item t-select" @click="select">
|
|
|
+ <view class="t-result__box-input">
|
|
|
+ <view>切换</view>
|
|
|
+ <view>模式</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="t-alternative">
|
|
|
+ <view class="t-alternative__item" v-for="(item,index) in colorList" :key="index">
|
|
|
+ <view class="t-alternative__item-content" :style="{ background: 'rgba(' + item.r + ',' + item.g + ',' + item.b + ',' + item.a + ')' }"
|
|
|
+ @click="selectColor(item)">
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ props: {
|
|
|
+ color: {
|
|
|
+ type: Object,
|
|
|
+ default () {
|
|
|
+ return {
|
|
|
+ r: 0,
|
|
|
+ g: 0,
|
|
|
+ b: 0,
|
|
|
+ a: 0
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ spareColor: {
|
|
|
+ type: Array,
|
|
|
+ default () {
|
|
|
+ return []
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ show: false,
|
|
|
+ active: false,
|
|
|
+ // rgba 颜色
|
|
|
+ rgba: {
|
|
|
+ r: 0,
|
|
|
+ g: 0,
|
|
|
+ b: 0,
|
|
|
+ a: 1
|
|
|
+ },
|
|
|
+ // hsb 颜色
|
|
|
+ hsb: {
|
|
|
+ h: 0,
|
|
|
+ s: 0,
|
|
|
+ b: 0
|
|
|
+ },
|
|
|
+ site: [{
|
|
|
+ top: 0,
|
|
|
+ left: 0
|
|
|
+ }, {
|
|
|
+ left: 0
|
|
|
+ }, {
|
|
|
+ left: 0
|
|
|
+ }],
|
|
|
+ index: 0,
|
|
|
+ bgcolor: {
|
|
|
+ r: 255,
|
|
|
+ g: 0,
|
|
|
+ b: 0,
|
|
|
+ a: 1
|
|
|
+ },
|
|
|
+ hex: '#000000',
|
|
|
+ mode: true,
|
|
|
+ colorList: [{
|
|
|
+ r: 244,
|
|
|
+ g: 67,
|
|
|
+ b: 54,
|
|
|
+ a: 1
|
|
|
+ }, {
|
|
|
+ r: 233,
|
|
|
+ g: 30,
|
|
|
+ b: 99,
|
|
|
+ a: 1
|
|
|
+ }, {
|
|
|
+ r: 156,
|
|
|
+ g: 39,
|
|
|
+ b: 176,
|
|
|
+ a: 1
|
|
|
+ }, {
|
|
|
+ r: 103,
|
|
|
+ g: 58,
|
|
|
+ b: 183,
|
|
|
+ a: 1
|
|
|
+ }, {
|
|
|
+ r: 63,
|
|
|
+ g: 81,
|
|
|
+ b: 181,
|
|
|
+ a: 1
|
|
|
+ }, {
|
|
|
+ r: 33,
|
|
|
+ g: 150,
|
|
|
+ b: 243,
|
|
|
+ a: 1
|
|
|
+ }, {
|
|
|
+ r: 3,
|
|
|
+ g: 169,
|
|
|
+ b: 244,
|
|
|
+ a: 1
|
|
|
+ }, {
|
|
|
+ r: 0,
|
|
|
+ g: 188,
|
|
|
+ b: 212,
|
|
|
+ a: 1
|
|
|
+ }, {
|
|
|
+ r: 0,
|
|
|
+ g: 150,
|
|
|
+ b: 136,
|
|
|
+ a: 1
|
|
|
+ }, {
|
|
|
+ r: 76,
|
|
|
+ g: 175,
|
|
|
+ b: 80,
|
|
|
+ a: 1
|
|
|
+ }, {
|
|
|
+ r: 139,
|
|
|
+ g: 195,
|
|
|
+ b: 74,
|
|
|
+ a: 1
|
|
|
+ }, {
|
|
|
+ r: 205,
|
|
|
+ g: 220,
|
|
|
+ b: 57,
|
|
|
+ a: 1
|
|
|
+ }, {
|
|
|
+ r: 255,
|
|
|
+ g: 235,
|
|
|
+ b: 59,
|
|
|
+ a: 1
|
|
|
+ }, {
|
|
|
+ r: 255,
|
|
|
+ g: 193,
|
|
|
+ b: 7,
|
|
|
+ a: 1
|
|
|
+ }, {
|
|
|
+ r: 255,
|
|
|
+ g: 152,
|
|
|
+ b: 0,
|
|
|
+ a: 1
|
|
|
+ }, {
|
|
|
+ r: 255,
|
|
|
+ g: 87,
|
|
|
+ b: 34,
|
|
|
+ a: 1
|
|
|
+ }, {
|
|
|
+ r: 121,
|
|
|
+ g: 85,
|
|
|
+ b: 72,
|
|
|
+ a: 1
|
|
|
+ }, {
|
|
|
+ r: 158,
|
|
|
+ g: 158,
|
|
|
+ b: 158,
|
|
|
+ a: 1
|
|
|
+ }, {
|
|
|
+ r: 0,
|
|
|
+ g: 0,
|
|
|
+ b: 0,
|
|
|
+ a: 0.5
|
|
|
+ }, {
|
|
|
+ r: 0,
|
|
|
+ g: 0,
|
|
|
+ b: 0,
|
|
|
+ a: 0
|
|
|
+ }, ]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.rgba = this.color;
|
|
|
+ if (this.spareColor.length !== 0) {
|
|
|
+ this.colorList = this.spareColor;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /**
|
|
|
+ * 初始化
|
|
|
+ */
|
|
|
+ init() {
|
|
|
+ // hsb 颜色
|
|
|
+ this.hsb = this.rgbToHex(this.rgba);
|
|
|
+ // this.setColor();
|
|
|
+ this.setValue(this.rgba);
|
|
|
+ },
|
|
|
+ moveHandle() {},
|
|
|
+ open() {
|
|
|
+ this.show = true;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.init();
|
|
|
+ setTimeout(() => {
|
|
|
+ this.active = true;
|
|
|
+ setTimeout(() => {
|
|
|
+ this.getSelectorQuery();
|
|
|
+ }, 350)
|
|
|
+ }, 50)
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ close() {
|
|
|
+ this.active = false;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.show = false;
|
|
|
+ }, 500)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ confirm() {
|
|
|
+ this.close();
|
|
|
+ this.$emit('confirm', {
|
|
|
+ rgba: this.rgba,
|
|
|
+ hex: this.hex
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 选择模式
|
|
|
+ select() {
|
|
|
+ this.mode = !this.mode
|
|
|
+ },
|
|
|
+ // 常用颜色选择
|
|
|
+ selectColor(item) {
|
|
|
+ this.setColorBySelect(item)
|
|
|
+ },
|
|
|
+ touchstart(e, index) {
|
|
|
+ const {
|
|
|
+ pageX,
|
|
|
+ pageY
|
|
|
+ } = e.touches[0];
|
|
|
+ this.pageX = pageX;
|
|
|
+ this.pageY = pageY;
|
|
|
+ this.setPosition(pageX, pageY, index);
|
|
|
+ },
|
|
|
+ touchmove(e, index) {
|
|
|
+ const {
|
|
|
+ pageX,
|
|
|
+ pageY
|
|
|
+ } = e.touches[0];
|
|
|
+ this.moveX = pageX;
|
|
|
+ this.moveY = pageY;
|
|
|
+ this.setPosition(pageX, pageY, index);
|
|
|
+ },
|
|
|
+ touchend(e, index) {},
|
|
|
+ /**
|
|
|
+ * 设置位置
|
|
|
+ */
|
|
|
+ setPosition(x, y, index) {
|
|
|
+ this.index = index;
|
|
|
+ const {
|
|
|
+ top,
|
|
|
+ left,
|
|
|
+ width,
|
|
|
+ height
|
|
|
+ } = this.position[index];
|
|
|
+ // 设置最大最小值
|
|
|
+
|
|
|
+ this.site[index].left = Math.max(0, Math.min(parseInt(x - left), width));
|
|
|
+ if (index === 0) {
|
|
|
+ this.site[index].top = Math.max(0, Math.min(parseInt(y - top), height));
|
|
|
+ // 设置颜色
|
|
|
+ this.hsb.s = parseInt((100 * this.site[index].left) / width);
|
|
|
+ this.hsb.b = parseInt(100 - (100 * this.site[index].top) / height);
|
|
|
+ this.setColor();
|
|
|
+ this.setValue(this.rgba);
|
|
|
+ } else {
|
|
|
+ this.setControl(index, this.site[index].left);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 设置 rgb 颜色
|
|
|
+ */
|
|
|
+ setColor() {
|
|
|
+ const rgb = this.HSBToRGB(this.hsb);
|
|
|
+ this.rgba.r = rgb.r;
|
|
|
+ this.rgba.g = rgb.g;
|
|
|
+ this.rgba.b = rgb.b;
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 设置二进制颜色
|
|
|
+ * @param {Object} rgb
|
|
|
+ */
|
|
|
+ setValue(rgb) {
|
|
|
+ this.hex = '#' + this.rgbToHex(rgb);
|
|
|
+ },
|
|
|
+ setControl(index, x) {
|
|
|
+ const {
|
|
|
+ top,
|
|
|
+ left,
|
|
|
+ width,
|
|
|
+ height
|
|
|
+ } = this.position[index];
|
|
|
+
|
|
|
+ if (index === 1) {
|
|
|
+ this.hsb.h = parseInt((360 * x) / width);
|
|
|
+ this.bgcolor = this.HSBToRGB({
|
|
|
+ h: this.hsb.h,
|
|
|
+ s: 100,
|
|
|
+ b: 100
|
|
|
+ });
|
|
|
+ this.setColor()
|
|
|
+ } else {
|
|
|
+ this.rgba.a = (x / width).toFixed(1);
|
|
|
+ }
|
|
|
+ this.setValue(this.rgba);
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * rgb 转 二进制 hex
|
|
|
+ * @param {Object} rgb
|
|
|
+ */
|
|
|
+ rgbToHex(rgb) {
|
|
|
+ let hex = [rgb.r.toString(16), rgb.g.toString(16), rgb.b.toString(16)];
|
|
|
+ hex.map(function(str, i) {
|
|
|
+ if (str.length == 1) {
|
|
|
+ hex[i] = '0' + str;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return hex.join('');
|
|
|
+ },
|
|
|
+ setColorBySelect(getrgb) {
|
|
|
+ const {
|
|
|
+ r,
|
|
|
+ g,
|
|
|
+ b,
|
|
|
+ a
|
|
|
+ } = getrgb;
|
|
|
+ let rgb = {}
|
|
|
+ rgb = {
|
|
|
+ r: r ? parseInt(r) : 0,
|
|
|
+ g: g ? parseInt(g) : 0,
|
|
|
+ b: b ? parseInt(b) : 0,
|
|
|
+ a: a ? a : 0,
|
|
|
+ };
|
|
|
+ this.rgba = rgb;
|
|
|
+ this.hsb = this.rgbToHsb(rgb);
|
|
|
+ this.changeViewByHsb();
|
|
|
+ },
|
|
|
+ changeViewByHsb() {
|
|
|
+ const [a, b, c] = this.position;
|
|
|
+ this.site[0].left = parseInt(this.hsb.s * a.width / 100);
|
|
|
+ this.site[0].top = parseInt((100 - this.hsb.b) * a.height / 100);
|
|
|
+ this.setColor(this.hsb.h);
|
|
|
+ this.setValue(this.rgba);
|
|
|
+ this.bgcolor = this.HSBToRGB({
|
|
|
+ h: this.hsb.h,
|
|
|
+ s: 100,
|
|
|
+ b: 100
|
|
|
+ });
|
|
|
+
|
|
|
+ this.site[1].left = this.hsb.h / 360 * b.width;
|
|
|
+ this.site[2].left = this.rgba.a * c.width;
|
|
|
+
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * hsb 转 rgb
|
|
|
+ * @param {Object} 颜色模式 H(hues)表示色相,S(saturation)表示饱和度,B(brightness)表示亮度
|
|
|
+ */
|
|
|
+ HSBToRGB(hsb) {
|
|
|
+ let rgb = {};
|
|
|
+ let h = Math.round(hsb.h);
|
|
|
+ let s = Math.round((hsb.s * 255) / 100);
|
|
|
+ let v = Math.round((hsb.b * 255) / 100);
|
|
|
+ if (s == 0) {
|
|
|
+ rgb.r = rgb.g = rgb.b = v;
|
|
|
+ } else {
|
|
|
+ let t1 = v;
|
|
|
+ let t2 = ((255 - s) * v) / 255;
|
|
|
+ let t3 = ((t1 - t2) * (h % 60)) / 60;
|
|
|
+ if (h == 360) h = 0;
|
|
|
+ if (h < 60) {
|
|
|
+ rgb.r = t1;
|
|
|
+ rgb.b = t2;
|
|
|
+ rgb.g = t2 + t3;
|
|
|
+ } else if (h < 120) {
|
|
|
+ rgb.g = t1;
|
|
|
+ rgb.b = t2;
|
|
|
+ rgb.r = t1 - t3;
|
|
|
+ } else if (h < 180) {
|
|
|
+ rgb.g = t1;
|
|
|
+ rgb.r = t2;
|
|
|
+ rgb.b = t2 + t3;
|
|
|
+ } else if (h < 240) {
|
|
|
+ rgb.b = t1;
|
|
|
+ rgb.r = t2;
|
|
|
+ rgb.g = t1 - t3;
|
|
|
+ } else if (h < 300) {
|
|
|
+ rgb.b = t1;
|
|
|
+ rgb.g = t2;
|
|
|
+ rgb.r = t2 + t3;
|
|
|
+ } else if (h < 360) {
|
|
|
+ rgb.r = t1;
|
|
|
+ rgb.g = t2;
|
|
|
+ rgb.b = t1 - t3;
|
|
|
+ } else {
|
|
|
+ rgb.r = 0;
|
|
|
+ rgb.g = 0;
|
|
|
+ rgb.b = 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ r: Math.round(rgb.r),
|
|
|
+ g: Math.round(rgb.g),
|
|
|
+ b: Math.round(rgb.b)
|
|
|
+ };
|
|
|
+ },
|
|
|
+ rgbToHsb(rgb) {
|
|
|
+ let hsb = {
|
|
|
+ h: 0,
|
|
|
+ s: 0,
|
|
|
+ b: 0
|
|
|
+ };
|
|
|
+ let min = Math.min(rgb.r, rgb.g, rgb.b);
|
|
|
+ let max = Math.max(rgb.r, rgb.g, rgb.b);
|
|
|
+ let delta = max - min;
|
|
|
+ hsb.b = max;
|
|
|
+ hsb.s = max != 0 ? 255 * delta / max : 0;
|
|
|
+ if (hsb.s != 0) {
|
|
|
+ if (rgb.r == max) hsb.h = (rgb.g - rgb.b) / delta;
|
|
|
+ else if (rgb.g == max) hsb.h = 2 + (rgb.b - rgb.r) / delta;
|
|
|
+ else hsb.h = 4 + (rgb.r - rgb.g) / delta;
|
|
|
+ } else hsb.h = -1;
|
|
|
+ hsb.h *= 60;
|
|
|
+ if (hsb.h < 0) hsb.h = 0;
|
|
|
+ hsb.s *= 100 / 255;
|
|
|
+ hsb.b *= 100 / 255;
|
|
|
+ return hsb;
|
|
|
+ },
|
|
|
+ getSelectorQuery() {
|
|
|
+ const views = uni.createSelectorQuery().in(this);
|
|
|
+ views
|
|
|
+ .selectAll('.boxs')
|
|
|
+ .boundingClientRect(data => {
|
|
|
+ if (!data || data.length === 0) {
|
|
|
+ setTimeout(() => this.getSelectorQuery(), 20)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.position = data;
|
|
|
+ // this.site[0].top = data[0].height;
|
|
|
+ // this.site[0].left = 0;
|
|
|
+ // this.site[1].left = data[1].width;
|
|
|
+ // this.site[2].left = data[2].width;
|
|
|
+ this.setColorBySelect(this.rgba);
|
|
|
+ })
|
|
|
+ .exec();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ spareColor(newVal) {
|
|
|
+ this.colorList = newVal;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+ .t-wrapper {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ z-index: 9999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .t-box {
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ padding: 30upx 0;
|
|
|
+ padding-top: 0;
|
|
|
+ background: #fff;
|
|
|
+ transition: all 0.3s;
|
|
|
+ transform: translateY(100%);
|
|
|
+ }
|
|
|
+
|
|
|
+ .t-box.active {
|
|
|
+ transform: translateY(0%);
|
|
|
+ }
|
|
|
+
|
|
|
+ .t-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 100%;
|
|
|
+ height: 100upx;
|
|
|
+ border-bottom: 1px #eee solid;
|
|
|
+ box-shadow: 1px 0 2px rgba(0, 0, 0, 0.1);
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .t-header-button {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 150upx;
|
|
|
+ height: 100upx;
|
|
|
+ font-size: 30upx;
|
|
|
+ color: #666;
|
|
|
+ padding-left: 20upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .t-header-button:last-child {
|
|
|
+ justify-content: flex-end;
|
|
|
+ padding-right: 20upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .t-mask {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ background: rgba(0, 0, 0, 0.6);
|
|
|
+ z-index: -1;
|
|
|
+ transition: all 0.3s;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .t-mask.active {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .t-color__box {
|
|
|
+ position: relative;
|
|
|
+ height: 400upx;
|
|
|
+ background: rgb(255, 0, 0);
|
|
|
+ overflow: hidden;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin: 0 20upx;
|
|
|
+ margin-top: 20upx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .t-background {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
|
|
|
+ }
|
|
|
+
|
|
|
+ .t-color-mask {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 400upx;
|
|
|
+ background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
|
|
|
+ }
|
|
|
+
|
|
|
+ .t-pointer {
|
|
|
+ position: absolute;
|
|
|
+ bottom: -8px;
|
|
|
+ left: -8px;
|
|
|
+ z-index: 2;
|
|
|
+ width: 15px;
|
|
|
+ height: 15px;
|
|
|
+ border: 1px #fff solid;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .t-show-color {
|
|
|
+ width: 100upx;
|
|
|
+ height: 50upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .t-control__box {
|
|
|
+ margin-top: 50upx;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ padding-left: 20upx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .t-control__color {
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 100upx;
|
|
|
+ height: 100upx;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #fff;
|
|
|
+ background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee),
|
|
|
+ linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee);
|
|
|
+ background-size: 36upx 36upx;
|
|
|
+ background-position: 0 0, 18upx 18upx;
|
|
|
+ border: 1px #eee solid;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .t-control__color-content {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .t-control-box__item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 30upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .t-controller {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 16px;
|
|
|
+ background-color: #fff;
|
|
|
+ background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee),
|
|
|
+ linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee);
|
|
|
+ background-size: 32upx 32upx;
|
|
|
+ background-position: 0 0, 16upx 16upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .t-hue {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
|
|
|
+ }
|
|
|
+
|
|
|
+ .t-transparency {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0));
|
|
|
+ }
|
|
|
+
|
|
|
+ .t-circle {
|
|
|
+ position: absolute;
|
|
|
+ /* right: -10px; */
|
|
|
+ top: -2px;
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: #fff;
|
|
|
+ box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .t-result__box {
|
|
|
+ margin-top: 20upx;
|
|
|
+ padding: 10upx;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .t-result__item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 10upx;
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .t-result__box-input {
|
|
|
+ padding: 10upx 0;
|
|
|
+ width: 100%;
|
|
|
+ font-size: 28upx;
|
|
|
+ box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
|
|
|
+ color: #999;
|
|
|
+ text-align: center;
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .t-result__box-text {
|
|
|
+ margin-top: 10upx;
|
|
|
+ font-size: 28upx;
|
|
|
+ line-height: 2;
|
|
|
+ }
|
|
|
+
|
|
|
+ .t-select {
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 150upx;
|
|
|
+ padding: 0 30upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .t-select .t-result__box-input {
|
|
|
+ border-radius: 10upx;
|
|
|
+ border: none;
|
|
|
+ color: #999;
|
|
|
+ box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.1);
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .t-select .t-result__box-input:active {
|
|
|
+ box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .t-alternative {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ /* justify-content: space-between; */
|
|
|
+ width: 100%;
|
|
|
+ padding-right: 10upx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .t-alternative__item {
|
|
|
+ margin-left: 12upx;
|
|
|
+ margin-top: 10upx;
|
|
|
+ width: 50upx;
|
|
|
+ height: 50upx;
|
|
|
+ border-radius: 10upx;
|
|
|
+ background-color: #fff;
|
|
|
+ background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee),
|
|
|
+ linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee);
|
|
|
+ background-size: 36upx 36upx;
|
|
|
+ background-position: 0 0, 18upx 18upx;
|
|
|
+ border: 1px #eee solid;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .t-alternative__item-content {
|
|
|
+ width: 50upx;
|
|
|
+ height: 50upx;
|
|
|
+ background: rgba(255, 0, 0, 0.5);
|
|
|
+ }
|
|
|
+
|
|
|
+ .t-alternative__item:active {
|
|
|
+ transition: all 0.3s;
|
|
|
+ transform: scale(1.1);
|
|
|
+ }
|
|
|
+</style>
|