zyronon
4 years ago
23 changed files with 800 additions and 2572 deletions
|
Before Width: | Height: | Size: 506 B |
|
Before Width: | Height: | Size: 502 B |
|
Before Width: | Height: | Size: 758 B |
|
Before Width: | Height: | Size: 330 B |
|
Before Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 899 B |
|
Before Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 1.0 KiB |
|
Before Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 1.1 KiB |
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,149 @@
@@ -0,0 +1,149 @@
|
||||
<template> |
||||
<div class="Share2Friend"> |
||||
<BaseHeader |
||||
backMode="light" |
||||
backImg="back" style="z-index: 7;"> |
||||
<template v-slot:center> |
||||
<span class="f16">已加入的群聊</span> |
||||
</template> |
||||
<template v-slot:right> |
||||
<div> |
||||
<span class="f16" :class="selectFriends.length?'save-yes':'save-no'" @click="save"> |
||||
完成{{ selectFriends.length ? `(${selectFriends.length})` : '' }} |
||||
</span> |
||||
</div> |
||||
</template> |
||||
</BaseHeader> |
||||
<div class="content"> |
||||
<div class="list"> |
||||
<div class="local-row" v-for="item of friends.all" @click="toggleSelect(item);"> |
||||
<Check mode="red" v-model="item.select"/> |
||||
<img :src="$imgPreview(item.avatar)" alt=""> |
||||
<div class="desc"> |
||||
<span class="name">{{ item.name.length > 20 ? item.name.substr(0, 20) + '...' : item.name }}</span> |
||||
<span class="num">(3)</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<NoMore></NoMore> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
import Search from "../../components/Search"; |
||||
import {mapState} from "vuex"; |
||||
import axios from "axios"; |
||||
import Check from "../../components/Check"; |
||||
import {forIn} from "lodash"; |
||||
|
||||
export default { |
||||
name: "Share2Friend", |
||||
components: {Search, Check}, |
||||
props: {}, |
||||
computed: { |
||||
// ...mapState(['friends']), |
||||
}, |
||||
data() { |
||||
return { |
||||
friends: { |
||||
all: {}, |
||||
recent: [], |
||||
eachOther: [], |
||||
}, |
||||
selectFriends: [], |
||||
} |
||||
}, |
||||
created() { |
||||
this.getFriends() |
||||
}, |
||||
methods: { |
||||
save() { |
||||
if (!this.selectFriends.length) return |
||||
this.$back() |
||||
}, |
||||
toggleSelect(item) { |
||||
let resIndex = this.selectFriends.findIndex(v => v.name === item.name) |
||||
if (resIndex !== -1) { |
||||
item.select = false |
||||
this.selectFriends.splice(resIndex, 1) |
||||
} else { |
||||
item.select = true |
||||
this.selectFriends.push(item) |
||||
} |
||||
}, |
||||
async getFriends() { |
||||
let res = await this.$api.user.friends() |
||||
if (res.code === this.SUCCESS) { |
||||
this.friends = res.data |
||||
this.friends.all = this.friends.all.sort((a, b) => { |
||||
if (a.pinyin < b.pinyin) return -1; |
||||
if (a.pinyin > b.pinyin) return 1; |
||||
return 0; |
||||
}) |
||||
} |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped lang="less"> |
||||
@import "../../assets/scss/index"; |
||||
|
||||
.Share2Friend { |
||||
position: fixed; |
||||
left: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
top: 0; |
||||
overflow: auto; |
||||
color: white; |
||||
font-size: 1.4rem; |
||||
|
||||
.content { |
||||
padding-top: 6rem; |
||||
} |
||||
|
||||
|
||||
.save-yes { |
||||
color: @primary-btn-color; |
||||
} |
||||
|
||||
.save-no { |
||||
color: @disable-primary-btn-color; |
||||
} |
||||
|
||||
.list { |
||||
|
||||
.local-row { |
||||
display: flex; |
||||
align-items: center; |
||||
padding: 1rem 2rem; |
||||
|
||||
&:active { |
||||
background: rgb(35, 41, 58); |
||||
} |
||||
|
||||
.check { |
||||
height: 2.2rem; |
||||
width: 2.2rem; |
||||
margin-right: 1.5rem; |
||||
} |
||||
|
||||
img { |
||||
height: 4.5rem; |
||||
width: 4.5rem; |
||||
border-radius: 50%; |
||||
margin-right: 1.5rem; |
||||
} |
||||
|
||||
.desc { |
||||
.num { |
||||
margin-left: .5rem; |
||||
color: @second-text-color; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
} |
||||
</style> |
||||
@ -0,0 +1,595 @@
@@ -0,0 +1,595 @@
|
||||
<template> |
||||
<div class="Share2Friend"> |
||||
<BaseHeader backImg="close" style="z-index: 7;"> |
||||
<template v-slot:center> |
||||
<span class="f16">私信给</span> |
||||
</template> |
||||
<template v-slot:bottom> |
||||
<div class="search"> |
||||
<div class="search-select-friends" v-if="selectFriends.length"> |
||||
<div class="wrapper"> |
||||
<img :src="$imgPreview(item.avatar)" v-for="item in selectFriends" @click="toggleSelect(item)"> |
||||
</div> |
||||
</div> |
||||
<img v-else class="search-icon" src="../../assets/img/icon/search-gray.png" alt=""> |
||||
<input type="text" placeholder="搜索" v-model="searchKey"> |
||||
<img v-if="searchKey" @click="clear" class="clear" src="../../assets/img/icon/components/gray-close-full.png"> |
||||
</div> |
||||
</template> |
||||
</BaseHeader> |
||||
<div class="is-search" |
||||
:style="{ height : (selectFriends.length && searchResult.length) ? 'calc(100% - 27.2rem)' : 'calc(100% - 11.2rem)' }" |
||||
v-show="searchKey"> |
||||
<div class="list" v-if="searchResult.length"> |
||||
<div class="local-row" v-for="item of searchResult" @click="toggleSelect(item);searchKey = '';"> |
||||
<Check mode="red" v-model="item.select"/> |
||||
<img :src="$imgPreview(item.avatar)" alt=""> |
||||
<div class="desc"> |
||||
<span class="name"> |
||||
<span v-if="item.name.indexOf(searchKey) > -1"> |
||||
{{ item.name.substr(0, item.name.indexOf(searchKey)) }}<span style="color: #ffd800">{{ |
||||
searchKey |
||||
}}</span>{{ item.name.substr(item.name.indexOf(searchKey) + searchKey.length) }} |
||||
</span> |
||||
<span v-else>{{ item.name }}</span> |
||||
</span> |
||||
<span class="account" v-if="item.account"> |
||||
抖音号： |
||||
<span v-if="item.account.indexOf(searchKey) > -1"> |
||||
{{ item.account.substr(0, item.account.indexOf(searchKey)) }}<span style="color: #ffd800">{{ |
||||
searchKey |
||||
}}</span>{{ item.account.substr(item.account.indexOf(searchKey) + searchKey.length) }} |
||||
</span> |
||||
<span v-else>{{ item.account }}</span> |
||||
</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="no-result" v-else> |
||||
<img src="../../assets/img/icon/no-result.png" alt=""> |
||||
<span class="n1">搜索结果为空</span> |
||||
<span class="n2">没有搜索到相关的联系人</span> |
||||
</div> |
||||
</div> |
||||
<div ref="list" |
||||
:style="{ paddingBottom : selectFriends.length ? '16rem' : 0 }" |
||||
class="content" |
||||
@scroll="scroll"> |
||||
<div class="list"> |
||||
<div class="row" @click="$nav('/message/joined-group-chat')"> |
||||
<span>已加入的群聊</span> |
||||
<back :scale=".7" direction="right"></back> |
||||
</div> |
||||
<div class="title">最近聊天</div> |
||||
<div class="local-row" v-for="item of friends.recent" @click="toggleSelect(item)"> |
||||
<Check mode="red" v-model="item.select"/> |
||||
<img :src="$imgPreview(item.avatar)" alt=""> |
||||
<span>{{ item.name }}</span> |
||||
</div> |
||||
<div class="title">互关好友</div> |
||||
<div class="local-row" v-for="item of friends.eachOther" @click="toggleSelect(item)"> |
||||
<Check mode="red" v-model="item.select"/> |
||||
<img :src="$imgPreview(item.avatar)" alt=""> |
||||
<span>{{ item.name }}</span> |
||||
</div> |
||||
<div class="title">全部</div> |
||||
<div v-for="(value, name) of friendsSort"> |
||||
<div :class="name === '#'?'top':name" class="title"> |
||||
<span>{{ name }}</span> |
||||
</div> |
||||
<div class="local-row" v-for="item of value" @click="toggleSelect(item)"> |
||||
<Check mode="red" v-model="item.select"/> |
||||
<img :src="$imgPreview(item.avatar)" alt=""> |
||||
<span>{{ item.name }}</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="share2friend" v-if="selectFriends.length && searchResult.length"> |
||||
<div class="comment"> |
||||
<textarea placeholder="有什么想和好友说的..."></textarea> |
||||
<img class="poster" src="../../assets/img/poster/1.jpg" alt=""> |
||||
</div> |
||||
<div class="wrapper"> |
||||
<div class="create-chat" v-if="selectFriends.length>1"> |
||||
<Check mode="red" v-model="isCreateChat"/> |
||||
<span>创建群聊</span> |
||||
</div> |
||||
<b-button type="primary">{{ selectFriends.length > 1 ? '分别发送' : '发送' }}</b-button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="indicator-ctn"> |
||||
<div class="indicator"> |
||||
<div class="item" data-index="top">#</div> |
||||
<div class="item">A</div> |
||||
<div class="item">B</div> |
||||
<div class="item">C</div> |
||||
<div class="item">D</div> |
||||
<div class="item">E</div> |
||||
<div class="item">F</div> |
||||
<div class="item">G</div> |
||||
<div class="item">H</div> |
||||
<div class="item">I</div> |
||||
<div class="item">J</div> |
||||
<div class="item">K</div> |
||||
<div class="item">L</div> |
||||
<div class="item">M</div> |
||||
<div class="item">N</div> |
||||
<div class="item">O</div> |
||||
<div class="item">P</div> |
||||
<div class="item">Q</div> |
||||
<div class="item">R</div> |
||||
<div class="item">S</div> |
||||
<div class="item">T</div> |
||||
<div class="item">U</div> |
||||
<div class="item">V</div> |
||||
<div class="item">W</div> |
||||
<div class="item">X</div> |
||||
<div class="item">Y</div> |
||||
<div class="item">Z</div> |
||||
</div> |
||||
</div> |
||||
<div class="hover" |
||||
:style="{ top : currentFixedIndicatorTop }" |
||||
ref="hover" |
||||
v-if="currentFixedIndicator"> |
||||
<img src="../../assets/img/icon/components/video/water.png" alt=""> |
||||
<span>{{ currentFixedIndicator }}</span> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
import Search from "../../components/Search"; |
||||
import {mapState} from "vuex"; |
||||
import axios from "axios"; |
||||
import Check from "../../components/Check"; |
||||
import {forIn} from "lodash"; |
||||
|
||||
export default { |
||||
name: "Share2Friend", |
||||
components: {Search, Check}, |
||||
props: {}, |
||||
computed: { |
||||
// ...mapState(['friends']), |
||||
}, |
||||
data() { |
||||
return { |
||||
isCreateChat: false, |
||||
searchKey: '', |
||||
indexOffsetTop: {}, |
||||
currentFixedIndicator: '', |
||||
currentFixedIndicatorTop: 0, |
||||
friends: { |
||||
all: {}, |
||||
recent: [], |
||||
eachOther: [], |
||||
}, |
||||
selectFriends: [], |
||||
friendsSort: {}, |
||||
searchResult: [] |
||||
} |
||||
}, |
||||
watch: { |
||||
searchKey(newVal) { |
||||
let temp = this.$clone(this.friends.all) |
||||
temp.map(v => { |
||||
if (this.selectFriends.find(w => w.id === v.id)) v.select = true |
||||
}) |
||||
this.searchResult = temp.filter(v => { |
||||
return v.name.includes(newVal) || v.account.includes(newVal); |
||||
}) |
||||
} |
||||
}, |
||||
created() { |
||||
this.getFriends() |
||||
}, |
||||
mounted() { |
||||
let indexs = document.querySelectorAll('.index') |
||||
indexs.forEach(v => { |
||||
this.indexOffsetTop[v.children[0].innerText] = v.offsetTop |
||||
}) |
||||
let items = document.querySelectorAll('.item') |
||||
let item = document.querySelector(`.item:nth-child(2)`) |
||||
let itemHeight = item.clientHeight |
||||
let ul = document.querySelector('.indicator') |
||||
let ulOffsetTop = ul.offsetTop |
||||
let resetColor = 'rgb(143, 143, 158)' |
||||
ul.addEventListener('touchstart', e => { |
||||
let pageY = e.touches[0].pageY - ulOffsetTop |
||||
let currentIndex = pageY / itemHeight |
||||
currentIndex = Math.floor(currentIndex) |
||||
render(currentIndex) |
||||
this.currentFixedIndicatorTop = e.touches[0].pageY - 28 + 'px' |
||||
}) |
||||
ul.addEventListener('touchmove', e => { |
||||
let pageY = e.touches[0].pageY - ulOffsetTop |
||||
this.currentFixedIndicatorTop = e.touches[0].pageY - 28 + 'px' |
||||
|
||||
let currentIndex = pageY / itemHeight |
||||
currentIndex = Math.floor(currentIndex) |
||||
if (currentIndex >= 0 && currentIndex < 27) { |
||||
render(currentIndex) |
||||
} |
||||
}) |
||||
ul.addEventListener('touchend', e => { |
||||
return this.currentFixedIndicator = '' |
||||
}) |
||||
let render = (currentIndex) => { |
||||
items.forEach((el, index) => { |
||||
el.style.color = resetColor |
||||
}) |
||||
items[currentIndex].style.color = '#fff' |
||||
this.currentFixedIndicator = items[currentIndex].innerText |
||||
this.goto(items[currentIndex]) |
||||
} |
||||
}, |
||||
methods: { |
||||
clear() { |
||||
console.log('clear') |
||||
this.searchKey = '' |
||||
}, |
||||
toggleSelect(item) { |
||||
//减少判断次数，找到了就跳出循环 |
||||
for (let i = 0; i < this.friends.recent.length; i++) { |
||||
let v = this.friends.recent[i] |
||||
if (v.name === item.name) { |
||||
v.select = !v.select |
||||
break |
||||
} |
||||
} |
||||
|
||||
for (let i = 0; i < this.friends.eachOther.length; i++) { |
||||
let v = this.friends.eachOther[i] |
||||
if (v.name === item.name) { |
||||
v.select = !v.select |
||||
break |
||||
} |
||||
} |
||||
|
||||
let find = false |
||||
let keys = Object.keys(this.friendsSort) |
||||
for (let i = 0; i < keys.length; i++) { |
||||
let k = keys[i] |
||||
for (let j = 0; j < this.friendsSort[k].length; j++) { |
||||
let value = this.friendsSort[k][j] |
||||
if (value.name === item.name) { |
||||
value.select = !value.select |
||||
find = true |
||||
break |
||||
} |
||||
} |
||||
if (find) break |
||||
} |
||||
|
||||
let resIndex = this.selectFriends.findIndex(v => v.name === item.name) |
||||
if (resIndex !== -1) { |
||||
item.select = false |
||||
this.selectFriends.splice(resIndex, 1) |
||||
} else { |
||||
item.select = true |
||||
this.selectFriends.push(item) |
||||
} |
||||
}, |
||||
async getFriends() { |
||||
let res = await this.$api.user.friends() |
||||
if (res.code === this.SUCCESS) { |
||||
this.friends = res.data |
||||
this.friends.all = this.friends.all.sort((a, b) => { |
||||
if (a.pinyin < b.pinyin) return -1; |
||||
if (a.pinyin > b.pinyin) return 1; |
||||
return 0; |
||||
}) |
||||
this.friends.all.map(v => { |
||||
if (this.friendsSort[v.pinyin]) { |
||||
this.friendsSort[v.pinyin].push(v) |
||||
} else { |
||||
this.friendsSort[v.pinyin] = [v] |
||||
} |
||||
}) |
||||
} |
||||
}, |
||||
goto(el) { |
||||
let list = this.$refs.list |
||||
let py |
||||
if (el.dataset['index']) { |
||||
py = 'top' |
||||
} else { |
||||
py = el.innerText |
||||
} |
||||
if (document.querySelector(`.${py}`)) { |
||||
list.scrollTop = document.querySelector(`.${py}`).offsetTop - 100 |
||||
} |
||||
}, |
||||
scroll(e) { |
||||
// let isFixed = document.querySelector(`.fixed`) |
||||
// console.log(isFixed) |
||||
// let listScrollTop = e.target.scrollTop + (isFixed ? 110 : 110) |
||||
let listScrollTop = e.target.scrollTop + 110 |
||||
// console.log('listScrollTop', listScrollTop) |
||||
let currentKey = null |
||||
for (const key in this.indexOffsetTop) { |
||||
// if (currentKey) break |
||||
let offsetTop = this.indexOffsetTop[key] |
||||
// console.log('offsetTop',offsetTop) |
||||
if (offsetTop < listScrollTop) { |
||||
currentKey = key |
||||
} |
||||
} |
||||
this.currentFixedIndicator = currentKey |
||||
// console.log('currentKey', currentKey) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped lang="less"> |
||||
@import "../../assets/scss/index"; |
||||
|
||||
.Share2Friend { |
||||
position: fixed; |
||||
left: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
top: 0; |
||||
overflow: auto; |
||||
color: white; |
||||
font-size: 1.4rem; |
||||
|
||||
.search { |
||||
border-bottom: 1px solid #cccccc11; |
||||
font-size: 1.4rem; |
||||
padding: 0; |
||||
height: 5rem; |
||||
border-radius: 2px; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
.search-select-friends { |
||||
.wrapper { |
||||
display: flex; |
||||
max-width: 70vw; |
||||
overflow-x: auto; |
||||
|
||||
img { |
||||
height: 3rem; |
||||
width: 3rem; |
||||
margin-right: 1rem; |
||||
border-radius: 50%; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.search-icon { |
||||
height: 2rem; |
||||
width: 2rem; |
||||
margin: 0 1rem; |
||||
} |
||||
|
||||
input { |
||||
//margin-top: .4rem; |
||||
color: white; |
||||
height: 50%; |
||||
width: 100%; |
||||
outline: none; |
||||
border: none; |
||||
padding: 0; |
||||
background: transparent; |
||||
|
||||
&::-webkit-input-placeholder { |
||||
color: @second-text-color; |
||||
} |
||||
} |
||||
|
||||
.clear { |
||||
height: 1.8rem; |
||||
width: 1.8rem; |
||||
margin-left: 1rem; |
||||
margin-right: 1rem; |
||||
} |
||||
} |
||||
|
||||
.indicator-ctn { |
||||
width: 2.5rem; |
||||
height: 100vh; |
||||
top: 0; |
||||
position: fixed; |
||||
z-index: 3; |
||||
right: 0.5rem; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
|
||||
.indicator { |
||||
width: 2.5rem; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
|
||||
div { |
||||
color: @second-text-color; |
||||
//transition: all .3s; |
||||
font-size: 1rem; |
||||
padding: .1rem; |
||||
} |
||||
|
||||
.arrow { |
||||
padding: 0 0 .3rem 0; |
||||
width: 0; |
||||
height: 0; |
||||
border: .5rem solid transparent; |
||||
border-bottom: 1rem solid @second-text-color; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.fixed { |
||||
position: fixed; |
||||
top: 11rem; |
||||
left: 2rem; |
||||
right: 2rem; |
||||
} |
||||
|
||||
.content { |
||||
height: calc(100% - 11.2rem); |
||||
margin-top: 11.2rem; |
||||
box-sizing: border-box; |
||||
width: 100%; |
||||
overflow-y: scroll; |
||||
|
||||
.share2friend { |
||||
position: fixed; |
||||
z-index: 4; |
||||
bottom: 0; |
||||
box-sizing: border-box; |
||||
width: 100vw; |
||||
height: 16rem; |
||||
background: @main-bg; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
|
||||
.comment { |
||||
padding: 2rem; |
||||
display: flex; |
||||
flex: 1; |
||||
|
||||
textarea { |
||||
flex: 1; |
||||
outline: none; |
||||
border: none; |
||||
background: transparent; |
||||
color: #fff; |
||||
} |
||||
|
||||
.poster { |
||||
margin-left: 2rem; |
||||
height: 4rem; |
||||
width: 4rem; |
||||
} |
||||
} |
||||
|
||||
.create-chat { |
||||
margin: 1rem; |
||||
display: flex; |
||||
align-items: center; |
||||
color: @second-text-color; |
||||
|
||||
.check { |
||||
margin-right: 1rem; |
||||
width: 1.6rem; |
||||
height: 1.6rem; |
||||
//transform: scale(1.2); |
||||
} |
||||
} |
||||
|
||||
.button { |
||||
|
||||
} |
||||
} |
||||
} |
||||
|
||||
.hover { |
||||
position: absolute; |
||||
right: 4rem; |
||||
top: 20rem; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
|
||||
span { |
||||
position: absolute; |
||||
margin-right: 1rem; |
||||
font-size: 1.8rem; |
||||
} |
||||
|
||||
img { |
||||
height: 5rem; |
||||
} |
||||
} |
||||
|
||||
.is-search { |
||||
background: @main-bg; |
||||
position: fixed; |
||||
z-index: 5; |
||||
left: 0; |
||||
height: calc(100% - 11.2rem); |
||||
top: 11.2rem; |
||||
box-sizing: border-box; |
||||
width: 100%; |
||||
overflow-y: scroll; |
||||
|
||||
.no-result { |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
|
||||
img { |
||||
margin-top: 15rem; |
||||
height: 15rem; |
||||
} |
||||
|
||||
.n1 { |
||||
margin-top: 4rem; |
||||
font-size: 1.6rem; |
||||
} |
||||
|
||||
.n2 { |
||||
margin-top: 2rem; |
||||
font-size: 1.2rem; |
||||
color: @second-text-color; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.list { |
||||
//padding-right: 2.5rem; |
||||
|
||||
.title { |
||||
font-size: 1.2rem; |
||||
color: @second-text-color; |
||||
padding: 1rem 2rem; |
||||
} |
||||
|
||||
|
||||
.local-row { |
||||
display: flex; |
||||
align-items: center; |
||||
padding: 1rem 2rem; |
||||
|
||||
&:active { |
||||
background: rgb(35, 41, 58); |
||||
} |
||||
|
||||
.check { |
||||
height: 2.2rem; |
||||
width: 2.2rem; |
||||
margin-right: 1.5rem; |
||||
} |
||||
|
||||
img { |
||||
height: 4.5rem; |
||||
width: 4.5rem; |
||||
border-radius: 50%; |
||||
margin-right: 1.5rem; |
||||
} |
||||
|
||||
.desc { |
||||
display: flex; |
||||
flex-direction: column; |
||||
|
||||
.name { |
||||
|
||||
} |
||||
|
||||
.account { |
||||
margin-top: .5rem; |
||||
font-size: 1.2rem; |
||||
color: @second-text-color; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue