605 lines
19 KiB
Vue
605 lines
19 KiB
Vue
<template>
|
||
<view class='index-list'>
|
||
<view class='index-list__head'>
|
||
<input v-model="citySearch" :placeholder='placeholder' class="index-list__input"
|
||
placeholder-class="index-list__input__placeholder" />
|
||
</view>
|
||
<div>
|
||
<div class='index-list__scroller'>
|
||
<div ref="bigDataTablePanel" class="index-list__big-data__table-panel">
|
||
<div ref="bigDataTableBody" class="index-list__big-data__table-body">
|
||
<div ref="bigDataTableDataPanel" id="bigDataTableDataPanel"
|
||
class="index-list__big-data__table-data-panel" @touchstart="bigDataTouchStartEvent"
|
||
@touchmove.stop.prevent="bigDataScrollEvent" @touchend="bigDataTouchEndEvent"
|
||
@mousewheel="bigDataScrollEvent">
|
||
<div ref="bigDataTableDataMarginSpace" :style="{'margin-top':newMarginTop+'px'}"></div>
|
||
<div v-for='item in bigDataFilteredFlatWithLineInfoCurrent' :key='item.id'>
|
||
<div v-if='item.__line_info__.isEmptySpace'
|
||
class="index-list__group-cell index-list__group-cell--empty-space"></div>
|
||
<div v-else-if='!item.__line_info__.isEmptySpace&&item.__line_info__.isHead'
|
||
class="index-list__group-head">{{item.username}}</div>
|
||
<div v-else-if='!item.__line_info__.isEmptySpace&&!item.__line_info__.isHead'
|
||
class="index-list__group-cell" @click="()=>{ itemClickHandler(item)}" :key="item.id"
|
||
style="display: flex;" @longpress="()=>{itemLongPress(item)}">
|
||
<view>
|
||
<image src="../../static/images/tx.png"
|
||
style="width:50rpx;height: 50rpx;margin-top: 10rpx;"></image>
|
||
</view>
|
||
<span
|
||
style="padding-left: 20rpx;font-size:34rpx ;letter-spacing: 1rpx;">{{item.username}}</span>
|
||
<span
|
||
style="padding-left: 20rpx;font-size:34rpx ;letter-spacing: 1rpx;">({{item.phone}})</span>
|
||
</div>
|
||
|
||
</div>
|
||
<div v-for='groupKey in Object.keys(bigDataFiltered)' style='' :key='groupKey'>
|
||
<div class="index-list__group-head"
|
||
:id='"list-archor-"+ encodeURIComponent(groupKey).replace("%","_")'>
|
||
{{groupKey}}
|
||
</div>
|
||
<div class="index-list__group-cell" v-for='city in dataFiltered[groupKey]'
|
||
@click="()=>{itemClickHandler(city)}" :clickable='true' :key="city.id">
|
||
{{city.username}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<view v-if='useIndex&&dataFiltered&&Object.keys(dataFiltered).length>0' class='index-list__index'
|
||
@touchmove="indexTouchMoveHandler" @touchstart="indexTouchMoveHandler" @touchend="isZoomActiveIndex=false">
|
||
<div class='index-list__index__wrapper'>
|
||
<div v-for='groupKey in Object.keys(dataFiltered)' :key='groupKey' class='index-list__index__letter'
|
||
:class='{"index-list__index__letter--active":currentActiveIndex===groupKey&&isZoomActiveIndex,
|
||
"index-list__index__letter--active2":currentActiveIndex===groupKey}'>
|
||
{{groupKey}}
|
||
</div>
|
||
</div>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
pinyin
|
||
} from "@/api/convertPinyin.js";
|
||
export default {
|
||
name: "missthee-indexlist",
|
||
props: {
|
||
data: {
|
||
type: Object,
|
||
default: function() {
|
||
return {}
|
||
}
|
||
},
|
||
placeholder: {
|
||
type: String,
|
||
default: function() {
|
||
return '输入关键字查询'
|
||
}
|
||
},
|
||
useIndex: {
|
||
type: Boolean,
|
||
default: function() {
|
||
return true
|
||
}
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
dataFiltered: {},
|
||
currentActiveIndex: '',
|
||
isZoomActiveIndex: false,
|
||
citySearch: '',
|
||
citySeatchDebounce: null,
|
||
bigDataFilteredLineHeightTotal: 0,
|
||
bigDataFiltered: {},
|
||
bigDataFilteredFlatWithLineInfo: [],
|
||
bigDataFilteredFlatWithLineInfoCurrent: [],
|
||
bigDataTableDataPanelEl: null,
|
||
bigDataParam: {
|
||
scrollHeight: 0,
|
||
dataHeadHeight: 35, // 索引行高
|
||
dataRowHeight: 45, // 数据行高
|
||
},
|
||
bigDataComputedParam: {
|
||
dataRowTopMax: 0, //数据行滑到底，移动的最大距离
|
||
dataRowTop: 0, //数据行当前移动的距离
|
||
},
|
||
|
||
bigDataScrollActionParam: {
|
||
speed: 0,
|
||
speedMax: 50,
|
||
resistance: 0.5,
|
||
prePositionY: null,
|
||
preTimestamp: null,
|
||
isMouseDown: false,
|
||
timeoutObj: null
|
||
},
|
||
newMarginTop: 0,
|
||
islongPress: false, //长按记录变量
|
||
}
|
||
},
|
||
watch: {
|
||
data: {
|
||
immediate: true,
|
||
handler() {
|
||
this.buildDataFiltered()
|
||
}
|
||
},
|
||
citySearch() {
|
||
if (this.citySeatchDebounce) {
|
||
clearTimeout(this.citySeatchDebounce)
|
||
this.citySeatchDebounce = null
|
||
}
|
||
this.citySeatchDebounce = setTimeout(() => {
|
||
this.buildDataFiltered()
|
||
}, 200)
|
||
},
|
||
dataFiltered: {
|
||
deep: true,
|
||
handler() {
|
||
this.bigDataComputedParam.dataRowTop = 0
|
||
this.bigDataBuildData()
|
||
this.bigDataUpdateRows()
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
this.bigDataTableDataPanelEl = this.$refs.bigDataTableDataPanel
|
||
// #ifdef H5
|
||
this.bigDataParam.scrollHeight = this.bigDataTableDataPanelEl.offsetHeight
|
||
// #endif
|
||
// #ifdef APP-VUE || APP
|
||
let view = uni.createSelectorQuery().in(this).select("#bigDataTableDataPanel")
|
||
view.fields({
|
||
size: true
|
||
}, res => {
|
||
this.bigDataParam.scrollHeight = res.height - 100
|
||
this.afterHeight = true;
|
||
}).exec()
|
||
// #endif
|
||
this.bigDataAddEvent()
|
||
this.bigDataBuildData()
|
||
this.bigDataUpdateRows()
|
||
this.bigDataScrollAminate()
|
||
},
|
||
beforeDestroy() {
|
||
this.bigDataClearScrollAnimate()
|
||
this.bigDataRemoveEvent()
|
||
},
|
||
methods: {
|
||
indexTouchMoveHandler(e) {
|
||
this.isZoomActiveIndex = true
|
||
const touch = e.touches[0];
|
||
const target = e.currentTarget || e.target
|
||
let currentIndex = Math.floor((touch.clientY + Object.keys(this.dataFiltered).length * 15 / 2 -
|
||
target.offsetTop) / 15)
|
||
currentIndex = Math.min(Object.keys(this.dataFiltered).length - 1, currentIndex)
|
||
currentIndex = Math.max(0, currentIndex)
|
||
if (Object.keys(this.dataFiltered)[currentIndex] !== this.currentActiveIndex) {
|
||
this.currentActiveIndex = Object.keys(this.dataFiltered)[currentIndex]
|
||
let currentStartLine = this.bigDataFilteredFlatWithLineInfo.find(item => item.id === 'Head:' + this
|
||
.currentActiveIndex)
|
||
this.bigDataComputedParam.dataRowTop = currentStartLine.__line_info__.totalHeight -
|
||
currentStartLine
|
||
.__line_info__.currentHeight
|
||
this.bigDataUpdateRows()
|
||
}
|
||
if ("undefined" !== typeof event) {
|
||
event.preventDefault()
|
||
event.stopPropagation()
|
||
}
|
||
},
|
||
itemClickHandler(item) {
|
||
if (this.islongPress) {
|
||
return
|
||
}
|
||
let result = {
|
||
...item
|
||
}
|
||
for (let key of Object.keys(result)) {
|
||
if (key === '__line_info__') {
|
||
delete result[key]
|
||
}
|
||
}
|
||
|
||
this.$emit('select-item', result)
|
||
},
|
||
itemLongPress(item) {
|
||
this.islongPress = true
|
||
let result = {
|
||
...item
|
||
}
|
||
for (let key of Object.keys(result)) {
|
||
if (key === '__line_info__') {
|
||
delete result[key]
|
||
}
|
||
}
|
||
|
||
let _this = this
|
||
uni.setClipboardData({
|
||
data: result.phone,
|
||
success: function() {
|
||
uni.showToast({
|
||
title: '复制成功',
|
||
icon: 'success'
|
||
});
|
||
setTimeout(() => {
|
||
_this.islongPress = false
|
||
}, 2000)
|
||
}
|
||
});
|
||
},
|
||
buildDataFiltered() {
|
||
if (!this.data) {
|
||
return {}
|
||
}
|
||
const resultObj = {}
|
||
for (const groupkey of Object.keys(this.data)) {
|
||
const cityListResult = this.data[groupkey].filter(item =>
|
||
item.username.toLowerCase().indexOf(this
|
||
.citySearch.toLowerCase()) >= 0
|
||
)
|
||
if (cityListResult && cityListResult.length > 0) {
|
||
resultObj[groupkey] = cityListResult
|
||
}
|
||
}
|
||
this.dataFiltered = resultObj
|
||
},
|
||
bigDataAddEvent() {
|
||
// #ifdef APP-VUE || APP
|
||
// plus.globalEvent.addEventListener('mousewheel', this.bigDataScrollEvent);
|
||
// plus.globalEvent.addEventListener('touchmove', this.bigDataScrollEvent);
|
||
// plus.globalEvent.addEventListener('touchstart', this.bigDataTouchStartEvent);
|
||
// plus.globalEvent.addEventListener('touchend', this.bigDataTouchEndEvent);
|
||
// #endif
|
||
// #ifdef H5
|
||
this.bigDataTableDataPanelEl.addEventListener('mousewheel', this.bigDataScrollEvent);
|
||
this.bigDataTableDataPanelEl.addEventListener('touchmove', this.bigDataScrollEvent);
|
||
this.bigDataTableDataPanelEl.addEventListener('touchstart', this.bigDataTouchStartEvent);
|
||
this.bigDataTableDataPanelEl.addEventListener('touchend', this.bigDataTouchEndEvent);
|
||
// #endif
|
||
|
||
},
|
||
bigDataRemoveEvent() {
|
||
this.bigDataTableDataPanelEl.removeEventListener('mousewheel', this.bigDataScrollEvent);
|
||
this.bigDataTableDataPanelEl.removeEventListener('touchmove', this.bigDataScrollEvent);
|
||
this.bigDataTableDataPanelEl.removeEventListener('touchstart', this.bigDataTouchStartEvent);
|
||
this.bigDataTableDataPanelEl.removeEventListener('touchend', this.bigDataTouchEndEvent);
|
||
},
|
||
bigDataTouchStartEvent(e) {
|
||
this.bigDataScrollActionParam.isMouseDown = true
|
||
this.bigDataScrollActionParam.speed = 0
|
||
},
|
||
bigDataTouchEndEvent(e) {
|
||
this.bigDataScrollActionParam.isMouseDown = false
|
||
this.bigDataScrollActionParam.prePositionY = null
|
||
},
|
||
bigDataScrollEvent(e) {
|
||
let scrollEvent = e;
|
||
// if (scrollEvent instanceof WheelEvent) {
|
||
// #ifdef H5
|
||
this.bigDataComputedParam.dataRowTop += (scrollEvent.wheelDelta < 0 ? 1 : -1) * 30;
|
||
if (this.bigDataComputedParam.dataRowTop <= 0) {
|
||
this.bigDataComputedParam.dataRowTop = 0; //滑块最多滑到顶部
|
||
} else if (this.bigDataComputedParam.dataRowTop >= this.bigDataComputedParam.dataRowTopMax) {
|
||
this.bigDataComputedParam.dataRowTop = this.bigDataComputedParam.dataRowTopMax; //滑块最多滑到最底部
|
||
} else {
|
||
e.preventDefault(); //禁用滑轮滚动默认事件。当表格滑动到边缘时再启用默认滚动事件
|
||
}
|
||
// #endif
|
||
// } else
|
||
// if (scrollEvent instanceof TouchEvent) {
|
||
// #ifdef APP||APP-VUE
|
||
if (this.bigDataScrollActionParam.isMouseDown) {
|
||
let positionY = scrollEvent.changedTouches[0].clientY
|
||
let timeStamp = scrollEvent.timeStamp
|
||
let step = 0
|
||
this.bigDataScrollActionParam.prePositionY = this.bigDataScrollActionParam.prePositionY ||
|
||
positionY
|
||
this.bigDataScrollActionParam.preTimeStamp = this.bigDataScrollActionParam.preTimeStamp ||
|
||
timeStamp
|
||
let timeDuration = timeStamp - this.bigDataScrollActionParam.preTimeStamp;
|
||
let velocity;
|
||
if (timeDuration === 0) {
|
||
velocity = 0
|
||
} else {
|
||
velocity = (positionY - this.bigDataScrollActionParam.prePositionY) / timeDuration
|
||
}
|
||
if (this.bigDataScrollActionParam.prePositionY !== null) {
|
||
step = positionY - this.bigDataScrollActionParam.prePositionY
|
||
this.bigDataComputedParam.dataRowTop -= step
|
||
}
|
||
this.bigDataScrollActionParam.prePositionY = positionY
|
||
this.bigDataScrollActionParam.preTimeStamp = timeStamp
|
||
this.bigDataScrollActionParam.speed = velocity * 16
|
||
e.preventDefault()
|
||
e.stopPropagation()
|
||
}
|
||
// #endif
|
||
// }
|
||
this.bigDataUpdateRows();
|
||
},
|
||
bigDataBuildData() {
|
||
this.bigDataFilteredFlatWithLineInfo = []
|
||
this.bigDataFilteredLineHeightTotal = 0
|
||
for (let key of Object.keys(this.dataFiltered)) {
|
||
if (this.dataFiltered[key] && this.dataFiltered[key].length > 0) {
|
||
this.bigDataFilteredLineHeightTotal += this.bigDataParam.dataHeadHeight
|
||
this.bigDataFilteredFlatWithLineInfo.push({
|
||
id: "Head:" + key,
|
||
username: key,
|
||
__line_info__: {
|
||
isEmptySpace: false,
|
||
isHead: true,
|
||
currentHeight: this.bigDataParam.dataHeadHeight,
|
||
totalHeight: this.bigDataFilteredLineHeightTotal
|
||
}
|
||
})
|
||
this.dataFiltered[key].forEach((item) => {
|
||
this.bigDataFilteredLineHeightTotal += this.bigDataParam.dataRowHeight
|
||
this.bigDataFilteredFlatWithLineInfo.push({
|
||
id: "Row:" + item.id,
|
||
username: item.username,
|
||
phone: item.phone,
|
||
__line_info__: {
|
||
isEmptySpace: false,
|
||
isHead: false,
|
||
currentHeight: this.bigDataParam.dataRowHeight,
|
||
totalHeight: this.bigDataFilteredLineHeightTotal
|
||
}
|
||
})
|
||
})
|
||
}
|
||
}
|
||
this.bigDataFilteredLineHeightTotal += this.bigDataParam.dataRowHeight
|
||
this.bigDataFilteredFlatWithLineInfo.push({
|
||
id: "EmptyFooter",
|
||
username: '',
|
||
__line_info__: {
|
||
isEmptySpace: true,
|
||
isHead: false,
|
||
currentHeight: this.bigDataParam.dataRowHeight,
|
||
totalHeight: this.bigDataFilteredLineHeightTotal
|
||
}
|
||
})
|
||
//计算出数据区域滑动到最后一条数据，所需要的位移距离
|
||
this.bigDataComputedParam.dataRowTopMax = Math.max(this.bigDataFilteredLineHeightTotal - this.bigDataParam
|
||
.scrollHeight, 0)
|
||
},
|
||
bigDataUpdateRows() {
|
||
this.bigDataComputedParam.dataRowTop = Math.max(0, this.bigDataComputedParam.dataRowTop)
|
||
this.bigDataComputedParam.dataRowTop = Math.min(this.bigDataComputedParam.dataRowTop, this
|
||
.bigDataComputedParam.dataRowTopMax)
|
||
if (this.bigDataFilteredFlatWithLineInfo.length > 0) {
|
||
//更新数据区的数据，根据滚动的距离，确定可见的第一条数据下标（此方法保证可见数据行内容的更新。注释掉此方法，拖动滚动条，数据会在开始部分一直循环）
|
||
//遍历数据，插入窗口中可见的数据行
|
||
let startIndex = null
|
||
let endIndex = null
|
||
|
||
for (let i = parseInt(this.bigDataComputedParam.dataRowTop / Math.max(this.bigDataParam.dataRowHeight,
|
||
this.bigDataParam.dataHeadHeight), 10) - 1; i < this.bigDataFilteredFlatWithLineInfo
|
||
.length; i++) {
|
||
if (i < 0) {
|
||
continue
|
||
}
|
||
const totalHeight = this.bigDataFilteredFlatWithLineInfo[i].__line_info__.totalHeight
|
||
if (totalHeight >= this.bigDataComputedParam.dataRowTop && startIndex === null) {
|
||
startIndex = i
|
||
}
|
||
if (totalHeight >= (this.bigDataComputedParam.dataRowTop + this.bigDataParam.scrollHeight) &&
|
||
endIndex === null) {
|
||
endIndex = Math.min(i + 3, this.bigDataFilteredFlatWithLineInfo.length)
|
||
} else if (endIndex === null && this.bigDataFilteredFlatWithLineInfo.length < 10) {
|
||
endIndex = this.bigDataFilteredFlatWithLineInfo.length
|
||
}
|
||
if (startIndex !== null && endIndex !== null) {
|
||
break
|
||
}
|
||
}
|
||
startIndex = startIndex || 0
|
||
endIndex = endIndex || 0
|
||
this.bigDataFilteredFlatWithLineInfoCurrent = this.bigDataFilteredFlatWithLineInfo.slice(startIndex,
|
||
endIndex)
|
||
if (this.bigDataFilteredFlatWithLineInfoCurrent && this.bigDataFilteredFlatWithLineInfoCurrent[0]) {
|
||
const tmp = this.bigDataFilteredFlatWithLineInfoCurrent[0]
|
||
let firstRowHeight = tmp.__line_info__.currentHeight || 0
|
||
let firstRowTotalHeight = tmp.__line_info__.totalHeight || 0
|
||
//数据区实现拖动滑条的位移效果（保证数据行的滚动效果，注释此方法，拖动滚动条，数据无滚动效果，但内容会更新）
|
||
this.newMarginTop = firstRowTotalHeight - this.bigDataComputedParam.dataRowTop - firstRowHeight
|
||
if (!this.isZoomActiveIndex) {
|
||
this.currentActiveIndex = pinyin.getFullChars(tmp.username).charAt(0).toUpperCase();
|
||
}
|
||
}
|
||
|
||
}
|
||
},
|
||
bigDataScrollAminate() {
|
||
this.bigDataScrollActionParam.timeoutObj = setInterval(() => {
|
||
if (Math.abs(this.bigDataScrollActionParam.speed) > 0 && !this.bigDataScrollActionParam
|
||
.isMouseDown) {
|
||
this.bigDataScrollActionParam.speed = (this.bigDataScrollActionParam.speed >= 0 ? 1 : -1) *
|
||
Math.min(this.bigDataScrollActionParam.speedMax, Math.max(0, Math.abs(this
|
||
.bigDataScrollActionParam.speed) - this.bigDataScrollActionParam
|
||
.resistance))
|
||
this.bigDataComputedParam.dataRowTop -= this.bigDataScrollActionParam.speed
|
||
this.bigDataUpdateRows()
|
||
}
|
||
}, 16)
|
||
},
|
||
bigDataClearScrollAnimate() {
|
||
if (this.bigDataScrollActionParam.timeoutObj) {
|
||
clearInterval(this.bigDataScrollActionParam.timeoutObj)
|
||
this.bigDataScrollActionParam.timeoutObj = null
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang='scss' scoped>
|
||
* {
|
||
font-family: Consolas, sans-serif;
|
||
box-sizing: border-box !important;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
|
||
.index-list__index__letter--active2 {
|
||
color: red;
|
||
}
|
||
|
||
.index-list__index__letter {
|
||
margin: 5px 0;
|
||
font-size: 20px;
|
||
}
|
||
|
||
.index-list {
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
width: 100%;
|
||
|
||
&__head {
|
||
position: absolute;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 50px;
|
||
overflow: hidden;
|
||
background-color: $uni-bg-color;
|
||
border-bottom: 1px solid $uni-bg-color-grey;
|
||
}
|
||
|
||
&__input {
|
||
box-sizing: border-box;
|
||
width: 90%;
|
||
height: 30px;
|
||
padding: 0 20px;
|
||
margin: auto;
|
||
height: 30px;
|
||
margin: 10px auto;
|
||
line-height: 30px;
|
||
background-color: $uni-bg-color-grey;
|
||
border-radius: 30px;
|
||
font-size: 12px;
|
||
color: $uni-text-color;
|
||
|
||
&__placeholder {
|
||
text-align: center;
|
||
color: $uni-text-color-placeholder;
|
||
}
|
||
}
|
||
|
||
&__scroller {
|
||
position: absolute;
|
||
top: 50px;
|
||
bottom: 0;
|
||
width: 100%;
|
||
background-color: white;
|
||
overflow-x: hidden;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
&__big-data {
|
||
|
||
&__table-panel {
|
||
height: 100%;
|
||
width: 100%;
|
||
}
|
||
|
||
&__table-body {
|
||
/*因为数据区与滚动条要使用position:absolute做成左右固定布局，table-body作为其两节点的父节点，使用position: relative*/
|
||
position: relative;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
background-color: white;
|
||
}
|
||
|
||
&__table-data-panel {
|
||
overflow: hidden;
|
||
position: absolute;
|
||
left: 0;
|
||
/*right值宽度等于滚动条的宽度。也可不设置，但滚动条会覆盖表格的最右侧*/
|
||
/*right: 15px;*/
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
&__group-head {
|
||
box-sizing: border-box;
|
||
background-color: $uni-bg-color-grey;
|
||
color: $uni-text-color-grey;
|
||
height: 35px;
|
||
line-height: 45px;
|
||
padding: 0 0 0 15px;
|
||
}
|
||
|
||
&__group-cell {
|
||
box-sizing: border-box;
|
||
background-color: $uni-bg-color;
|
||
color: $uni-text-color;
|
||
font-size: 14px;
|
||
font-family: SourceHanSansSC-Regular, SourceHanSansSC;
|
||
height: 45px;
|
||
line-height: 45px;
|
||
padding: 0 0 0 15px;
|
||
|
||
&:after {
|
||
display: block;
|
||
position: absolute;
|
||
content: '';
|
||
width: 100%;
|
||
height: 1px;
|
||
background-color: $uni-bg-color-grey;
|
||
}
|
||
|
||
&:active {
|
||
background-color: $uni-bg-color-hover;
|
||
}
|
||
|
||
&--empty-space {
|
||
&:active {
|
||
background-color: white;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
&__index {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
|
||
&__wrapper {
|
||
width: 20px;
|
||
margin: 0 7px 0 0;
|
||
text-align: center;
|
||
background-color: rgba(0, 0, 0, 0.03);
|
||
border-radius: 10px;
|
||
color: $uni-text-color-grey;
|
||
padding: 10px 0;
|
||
font-family: Consolas, sans-serif;
|
||
}
|
||
|
||
&__letter {
|
||
display: block;
|
||
height: 15px !important;
|
||
line-height: 15px !important;
|
||
transition: transform 0.1s;
|
||
|
||
&--active {
|
||
transition: none;
|
||
font-weight: bold;
|
||
font-size: 50px;
|
||
transform: translateX(-70px);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |