mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2025-05-19 01:50:15 +09:00
785 lines
16 KiB
Vue
785 lines
16 KiB
Vue
<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>
|