Browse Source

upload

master
HolyKnightIX 2 years ago
parent
commit
4c7e890c60
3 changed files with 793 additions and 80 deletions
  1. +278
    -0
      src/components/languageToText.vue
  2. +507
    -0
      src/views/chat/chat copy.vue
  3. +8
    -80
      src/views/chat/chat.vue

+ 278
- 0
src/components/languageToText.vue View File

@@ -0,0 +1,278 @@
<template>
<div class="showBody-bottom-speakDiv">
<!-- 没点麦克风 -->
<div v-show="!speakingAction" class="showBody-bottom-speakDiv-text">点击语音按钮,快来跟我对话吧!</div>
<div @click="speakingAction=!speakingAction" v-show="!speakingAction" class="defaultBtn buleBtn">
<img src="@/assets/icon/icon-microphone2.png" alt="">
</div>
<!-- 点了麦克风 -->
<div v-show="speakingAction" class="showBody-bottom-speakDiv-text">按住说话</div>
<div @click="speakingAction=!speakingAction" v-show="speakingAction" class="defaultBtn buleBtn">
<img src="@/assets/icon/icon-speaking.png" alt="">
</div>
</div>
</template>

<script>
export default {
name: 'HomeWapLanguageToText',

data() {
return {
speakingAction: false, // 底部是否说话按钮状态
};
},

mounted() {
},

methods: {
},
};
</script>

<style lang="scss" scoped>
.defaultBtn {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
width: 44px;
height: 44px;
background: rgba(0,0,0,0.3);
border-radius: 22px;
img {
width: 24px;
height: 24px;
}
}
.contnet {

.showBody {
position: relative;
width: 100%;
height: calc(100vh - 44px) ;
background-color: red;
&-bottom {
position: absolute;
bottom: 0;
width: 100%;
// height: 150px;
padding-bottom: 33px;
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000000 100%);
&-buttons {
display: flex;
justify-content: space-evenly;
padding: 0 20px;
color: #fff;
font-size: 10px;
&-item {
display: flex;
flex-wrap: wrap;
justify-content: center;
p {
margin-top: 4px;
}
}
}
.defaultBtn {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
width: 44px;
height: 44px;
background: rgba(0,0,0,0.3);
border-radius: 22px;
img {
width: 24px;
height: 24px;
}
}
&-speakDiv {
display: flex;
justify-content: space-between;
margin-top: 20px;
padding: 0 15px;
&-text {
margin-top: 4px;
width: 290px;
height: 36px;
border-radius: 18px;
border: 1px solid #FFFFFF;
font-size: 14px;
color: #FFFFFF;
text-align: center;
line-height: 34px;
}
.whiteDiv {
background-color: #ececec;
color: #000;
}
}
}
&-modelList {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
height: 200px;
padding-left: 15px;
overflow-x: scroll;
&-item {
position: relative;
margin-right: 15px;
&-boxBorder {
position: absolute;
top: -2px;
width: 123px;
height: 183px;
border-radius: 8px;
transition: all 0.5s; //
border: 3px solid #00ffe1;
}
.modelName {
position: absolute;
top: 0;
left: 0;
width: 48px;
height: 28px;
background: rgba(0,0,0,0.5);
border-radius: 8px 0px 8px 0px;
color: #fff;
font-size: 13px;
line-height: 28px;
text-align: center;
}
img {
width: 120px;
height: 180px;
border-radius:8px 5px 5px 8px;
}
}

}
&-chatBox {
position: absolute;
bottom: 0;
width: 100%;
height: 375px;
background-color: #ECECEC;
&-close {
padding: 10px 15px;
height: 35px;
i {
float: right;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
font-weight: 600;
}
}
&-record {
padding: 5px 10px 0;
height: 255px;
overflow-y: scroll;
font-size: 15px;
color: #333333;
line-height: 21px;
&-my {
float: right;
padding: 10px 20px;
margin-bottom: 15px;
background: #9EE445;
border-radius: 20px 20px 2px 20px;
clear: both;
}
.others {
float: left;
background: #FFFFFF;
border-radius: 20px 20px 20px 2px;
}
}
.showBody-bottom-speakDiv {
margin-top: 0;
height: 85px;
padding-top: 15px;
background-color: #fff;
&-text {
color: #666;
border-radius: 18px;
border: 1px solid #666666;
}
}
}
&-global {
position: absolute;
bottom: 0;
width: 100%;
height: 385px;
background-color: #ECECEC;
&-choose {
padding: 20px 36px 0;
height: 304px;
overflow-y: scroll;
font-size: 15px;
color: #333333;
line-height: 21px;
&-language {
display: flex;
justify-content: start;
flex-wrap: wrap;
width: 300px;
height: 210px;
background-color: #fff;
overflow: hidden;
border: none;
border-radius: 15px;
&-item {
width: 100px;
height: 70px;
text-align: center;
line-height: 70px;
font-size: 14px;
color: #333;
border: 1px solid #ECECEC;
}
}
&-btn {
display: flex;
justify-content: space-between;
margin-top: 20px;
>div {
width: 139px;
height: 37px;
border-radius: 31px;
text-align: center;
line-height: 37px;
font-size: 15px;
font-weight: 600;
}
&-no {
color: #333333;
background: #FFFFFF;
}
&-yes {
color: #FFFFFF;
background: #24A9FF;
}
}
}
.showBody-bottom-speakDiv {
margin-top: 0;
height: 85px;
padding-top: 15px;
background-color: #fff;
&-text {
color: #666;
border-radius: 18px;
border: 1px solid #666666;
}
}
}
}
}
</style>

+ 507
- 0
src/views/chat/chat copy.vue View File

@@ -0,0 +1,507 @@
<template>
<div :class="inPage ? 'page active' : 'page'">
<div id="top"></div>
<!-- 主体内容 -->
<div class="contnet">
<!-- 头部 -->
<div class="head">
<img src="../../assets/icon/icon-loginout.png" alt="">
<div class="head-exit">
<img src="../../assets/icon/icon-loginoutwhite.png" alt="">
退出聊天
</div>
</div>
<!-- 显示模板区 -->
<div class="showBody">
<!-- 底部渐变区 -->
<div class="showBody-bottom">
<!-- 更换人物模板列表 -->
<div v-show="PersonButtonAction" class="showBody-modelList">
<div v-for="item,index in modelList" :key="item.name" class="showBody-modelList-item" @click="modelItemAction=index">
<div class="modelName">{{ item.name }}
<div v-show="modelItemAction==index" class="showBody-modelList-item-boxBorder"></div>
</div>
<img :src="item.url" alt="">
</div>
</div>
<!-- 四大按钮 -->
<div class="showBody-bottom-buttons">
<!-- -->
<div class="showBody-bottom-buttons-item">
<div :class="{'buleBtn':PersonButtonAction}" class="defaultBtn" @click="clickPersonButton">
<img src="@/assets/icon/icon-person.png" alt="">
</div>
<p>更换人物模板</p>
</div>
<!-- -->
<div class="showBody-bottom-buttons-item">
<div :class="{'buleBtn':CameraAction}" class="defaultBtn" @click="clickCameraButton">
<img src="@/assets/icon/icon-openCamera.png" alt="">
</div>
<p>摄像头开启</p>
</div>
<!-- -->
<div class="showBody-bottom-buttons-item">
<div :class="{'buleBtn':CloseChatAction}" class="defaultBtn" @click="clickCloseChatButton">
<img src="@/assets/icon/icon-closeChat.png" alt="">
</div>
<p>对话框关闭</p>
</div>
<!-- -->
<div class="showBody-bottom-buttons-item">
<div :class="{'buleBtn':GlobalAction}" class="defaultBtn" @click="clickGlobalButton">
<img src="@/assets/icon/icon-global.png" alt="">
</div>
<p>选择对话语言</p>
</div>
</div>
<!-- 语音说话 -->
<div class="showBody-bottom-speakDiv">
<!-- 没点麦克风 -->
<div v-show="!speakingAction" class="showBody-bottom-speakDiv-text">点击语音按钮,快来跟我对话吧!</div>
<div @click="speakingAction=!speakingAction" v-show="!speakingAction" class="defaultBtn buleBtn">
<img src="../../assets/icon/icon-microphone2.png" alt="">
</div>
<!-- 点了麦克风 -->
<div v-show="speakingAction" class="showBody-bottom-speakDiv-text whiteDiv">按住说话</div>
<div @click="speakingAction=!speakingAction" v-show="speakingAction" class="defaultBtn buleBtn">
<img src="../../assets/icon/icon-speaking.png" alt="">
</div>
</div>
</div>
<!-- 摄像头窗口 -->
<div v-show="CameraAction" class="showBody-myCamera"></div>
<!-- 聊天框 -->
<div v-show="CloseChatAction" class="showBody-chatBox">
<!-- 关闭 -->
<div class="showBody-chatBox-close">
<i @click="CloseChatAction=false" class="el-icon-close"></i>
</div>
<!-- 聊天记录 -->
<div class="showBody-chatBox-record">
<div class="showBody-chatBox-record-my" :class="{'others':item.form!='me'}" v-for="item,index in chatRecordList" :key="index">
<span>{{ item.message }}</span>
</div>

</div>
<!-- 底部说话按钮 -->
<div class="showBody-bottom-speakDiv">
<!-- 没点麦克风 -->
<div v-show="!speakingAction" class="showBody-bottom-speakDiv-text">点击语音按钮,快来跟我对话吧!</div>
<div @click="speakingAction=!speakingAction" v-show="!speakingAction" class="defaultBtn buleBtn">
<img src="../../assets/icon/icon-microphone2.png" alt="">
</div>
<!-- 点了麦克风 -->
<div v-show="speakingAction" class="showBody-bottom-speakDiv-text">按住说话</div>
<div @click="speakingAction=!speakingAction" v-show="speakingAction" class="defaultBtn buleBtn">
<img src="../../assets/icon/icon-speaking.png" alt="">
</div>
</div>
</div>
<!-- 选择语言 -->
<div v-show="GlobalAction" class="showBody-global">
<!-- -->
<div class="showBody-global-choose">
<div class="showBody-global-choose-language">
<div class="showBody-global-choose-language-item" v-for="item in languageList" :key="item.type">
{{ item.type }}
</div>
</div>
<div class="showBody-global-choose-btn">
<div @click="GlobalAction=false" class="showBody-global-choose-btn-no">取消</div>
<div class="showBody-global-choose-btn-yes">确定</div>
</div>
</div>
<!-- 底部说话按钮 -->
<div class="showBody-bottom-speakDiv">
<!-- 没点麦克风 -->
<div v-show="!speakingAction" class="showBody-bottom-speakDiv-text">点击语音按钮,快来跟我对话吧!</div>
<div @click="speakingAction=!speakingAction" v-show="!speakingAction" class="defaultBtn buleBtn">
<img src="../../assets/icon/icon-microphone2.png" alt="">
</div>
<!-- 点了麦克风 -->
<div v-show="speakingAction" class="showBody-bottom-speakDiv-text">按住说话</div>
<div @click="speakingAction=!speakingAction" v-show="speakingAction" class="defaultBtn buleBtn">
<img src="../../assets/icon/icon-speaking.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</template>

<script>

// 组件
import Vue from "vue";
import { Toast } from "vant";
import { mapState, mapActions } from "vuex";
// 工具
import { scrollToID } from "../../utils";
Vue.use(Toast);
export default {
data() {
return {
inPage: false,
PersonButtonAction: false,//个人按钮状态
CameraAction:false,// 摄像头按钮状态
CloseChatAction:false,// 聊天框按钮状态
GlobalAction:false,// 语音按钮状态
speakingAction: false, // 底部是否说话按钮状态
modelList: [
{ name:'甘雨',url:require('../../assets/img/module_3_1.png')},
{ name:'莫甘娜',url:require('../../assets/img/module_3_1.png')},
{ name:'达尔文',url:require('../../assets/img/module_3_1.png')},
{ name:'雨果',url:require('../../assets/img/module_3_1.png')},
],// 人物模板列表
modelItemAction: -1,// 人物模板列表选中高亮
chatRecordList: [
{ form: 'me', message: '生于忧患死于安乐1生于忧患死于安乐1生于忧患死于安乐1生于忧患死于安乐1生于忧患死于安乐1' },
{ form: 'you', message: '生于忧患死于安乐2' },
{ form: 'me', message: '生于忧患死于安乐3' },
{ form: 'you', message: '生于忧患死于安乐4' },
{ form: 'me', message: '生于忧患死于安乐5' },
{ form: 'me', message: '生于忧患死于安乐6' },
{ form: 'me', message: '生于忧患死于安乐7' },
],// 聊天记录列表
languageList: [
{type:'AUTO'},
{type:'璃月语'},
{type:'JP语'},
{type:'english'},
{type:'中国话'},
{type:'四川话'},
{type:'东百话'},
{type:'阿拉伯语'},
{type:'朝鲜语'},
], //语种列表
};
},
computed: {
...mapState({
characters: (state) => state.publicObj.characters,
}),
},

methods: {
...mapActions(["setCharacters"]),
// 点击个人按钮事件
clickPersonButton() {
this.PersonButtonAction=!this.PersonButtonAction
},
// 点击摄像头按钮事件
clickCameraButton() {
this.CameraAction=!this.CameraAction
},
// 点击聊天框按钮事件
clickCloseChatButton() {
this.CloseChatAction=!this.CloseChatAction
},
// 点击语音按钮事件
clickGlobalButton() {
this.GlobalAction=!this.GlobalAction
},
go(url) {
this.$router.push(url);
},
},
created() {},
mounted() {
this.inPage = true;
scrollToID("top");
},
};
</script>

<style lang="scss" scoped>
.page {
transform: translateX(30%);
opacity: 0;
transition: all 0.5s; // global-transition
&.active {
opacity: 1;
transform: translateX(0);
}
}
.contnet {

.head {
display: flex;
justify-content: space-between;
padding: 4px 10px;
>img {
width: 36px;
height: 36px;
}
&-exit {
margin-top: 4px;
width: 97px;
height: 28px;
text-align: center;
line-height: 28px;
background: #24A9FF;
color: #fff;
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
border-radius: 33px;
>img {
margin-top: -2px;
margin-right: 4px;
}
}
}
.showBody {
position: relative;
width: 100%;
height: calc(100vh - 44px) ;
background-color: red;
&-bottom {
position: absolute;
bottom: 0;
width: 100%;
// height: 150px;
padding-bottom: 33px;
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000000 100%);
&-buttons {
display: flex;
justify-content: space-evenly;
padding: 0 20px;
color: #fff;
font-size: 10px;
&-item {
display: flex;
flex-wrap: wrap;
justify-content: center;
p {
margin-top: 4px;
}
}
}
.defaultBtn {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
width: 44px;
height: 44px;
background: rgba(0,0,0,0.3);
border-radius: 22px;
img {
width: 24px;
height: 24px;
}
}
&-speakDiv {
display: flex;
justify-content: space-between;
margin-top: 20px;
padding: 0 15px;
&-text {
margin-top: 4px;
width: 290px;
height: 36px;
border-radius: 18px;
border: 1px solid #FFFFFF;
font-size: 14px;
color: #FFFFFF;
text-align: center;
line-height: 34px;
}
.whiteDiv {
background-color: #ececec;
color: #000;
}
}
}
&-modelList {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
height: 200px;
padding-left: 15px;
overflow-x: scroll;
&-item {
position: relative;
margin-right: 15px;
&-boxBorder {
position: absolute;
top: -2px;
width: 123px;
height: 183px;
border-radius: 8px;
transition: all 0.5s; //
border: 3px solid #00ffe1;
}
.modelName {
position: absolute;
top: 0;
left: 0;
width: 48px;
height: 28px;
background: rgba(0,0,0,0.5);
border-radius: 8px 0px 8px 0px;
color: #fff;
font-size: 13px;
line-height: 28px;
text-align: center;
}
img {
width: 120px;
height: 180px;
border-radius:8px 5px 5px 8px;
}
}

}
&-myCamera {
position: absolute;
top: 0;
right: 0;
width: 96px;
height: 180px;
background-image:url(../../assets/img/bg.png);
background-size: contain;
}
&-chatBox {
position: absolute;
bottom: 0;
width: 100%;
height: 375px;
background-color: #ECECEC;
&-close {
padding: 10px 15px;
height: 35px;
i {
float: right;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
font-weight: 600;
}
}
&-record {
padding: 5px 10px 0;
height: 255px;
overflow-y: scroll;
font-size: 15px;
color: #333333;
line-height: 21px;
&-my {
float: right;
padding: 10px 20px;
margin-bottom: 15px;
background: #9EE445;
border-radius: 20px 20px 2px 20px;
clear: both;
}
.others {
float: left;
background: #FFFFFF;
border-radius: 20px 20px 20px 2px;
}
}
.showBody-bottom-speakDiv {
margin-top: 0;
height: 85px;
padding-top: 15px;
background-color: #fff;
&-text {
color: #666;
border-radius: 18px;
border: 1px solid #666666;
}
}
}
&-global {
position: absolute;
bottom: 0;
width: 100%;
height: 385px;
background-color: #ECECEC;
&-choose {
padding: 20px 36px 0;
height: 304px;
overflow-y: scroll;
font-size: 15px;
color: #333333;
line-height: 21px;
&-language {
display: flex;
justify-content: start;
flex-wrap: wrap;
width: 300px;
height: 210px;
background-color: #fff;
overflow: hidden;
border: none;
border-radius: 15px;
&-item {
width: 100px;
height: 70px;
text-align: center;
line-height: 70px;
font-size: 14px;
color: #333;
border: 1px solid #ECECEC;
}
}
&-btn {
display: flex;
justify-content: space-between;
margin-top: 20px;
>div {
width: 139px;
height: 37px;
border-radius: 31px;
text-align: center;
line-height: 37px;
font-size: 15px;
font-weight: 600;
}
&-no {
color: #333333;
background: #FFFFFF;
}
&-yes {
color: #FFFFFF;
background: #24A9FF;
}
}
}
.showBody-bottom-speakDiv {
margin-top: 0;
height: 85px;
padding-top: 15px;
background-color: #fff;
&-text {
color: #666;
border-radius: 18px;
border: 1px solid #666666;
}
}
}
}
}
.showBody-modelList::-webkit-scrollbar {
width:0;
}
.showBody-chatBox-record::-webkit-scrollbar {
width:0;
}
.defaultBtn {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
width: 44px;
height: 44px;
background: rgba(0,0,0,0.3);
border-radius: 22px;
img {
width: 24px;
height: 24px;
}
}
</style>

+ 8
- 80
src/views/chat/chat.vue View File

@@ -56,18 +56,7 @@
</div> </div>
</div> </div>
<!-- 语音说话 --> <!-- 语音说话 -->
<div class="showBody-bottom-speakDiv">
<!-- 没点麦克风 -->
<div v-show="!speakingAction" class="showBody-bottom-speakDiv-text">点击语音按钮,快来跟我对话吧!</div>
<div @click="speakingAction=!speakingAction" v-show="!speakingAction" class="defaultBtn buleBtn">
<img src="../../assets/icon/icon-microphone2.png" alt="">
</div>
<!-- 点了麦克风 -->
<div v-show="speakingAction" class="showBody-bottom-speakDiv-text whiteDiv">按住说话</div>
<div @click="speakingAction=!speakingAction" v-show="speakingAction" class="defaultBtn buleBtn">
<img src="../../assets/icon/icon-speaking.png" alt="">
</div>
</div>
<LanguageToText></LanguageToText>
</div> </div>
<!-- 摄像头窗口 --> <!-- 摄像头窗口 -->
<div v-show="CameraAction" class="showBody-myCamera"></div> <div v-show="CameraAction" class="showBody-myCamera"></div>
@@ -85,18 +74,7 @@


</div> </div>
<!-- 底部说话按钮 --> <!-- 底部说话按钮 -->
<div class="showBody-bottom-speakDiv">
<!-- 没点麦克风 -->
<div v-show="!speakingAction" class="showBody-bottom-speakDiv-text">点击语音按钮,快来跟我对话吧!</div>
<div @click="speakingAction=!speakingAction" v-show="!speakingAction" class="defaultBtn buleBtn">
<img src="../../assets/icon/icon-microphone2.png" alt="">
</div>
<!-- 点了麦克风 -->
<div v-show="speakingAction" class="showBody-bottom-speakDiv-text">按住说话</div>
<div @click="speakingAction=!speakingAction" v-show="speakingAction" class="defaultBtn buleBtn">
<img src="../../assets/icon/icon-speaking.png" alt="">
</div>
</div>
<LanguageToText></LanguageToText>
</div> </div>
<!-- 选择语言 --> <!-- 选择语言 -->
<div v-show="GlobalAction" class="showBody-global"> <div v-show="GlobalAction" class="showBody-global">
@@ -113,18 +91,7 @@
</div> </div>
</div> </div>
<!-- 底部说话按钮 --> <!-- 底部说话按钮 -->
<div class="showBody-bottom-speakDiv">
<!-- 没点麦克风 -->
<div v-show="!speakingAction" class="showBody-bottom-speakDiv-text">点击语音按钮,快来跟我对话吧!</div>
<div @click="speakingAction=!speakingAction" v-show="!speakingAction" class="defaultBtn buleBtn">
<img src="../../assets/icon/icon-microphone2.png" alt="">
</div>
<!-- 点了麦克风 -->
<div v-show="speakingAction" class="showBody-bottom-speakDiv-text">按住说话</div>
<div @click="speakingAction=!speakingAction" v-show="speakingAction" class="defaultBtn buleBtn">
<img src="../../assets/icon/icon-speaking.png" alt="">
</div>
</div>
<LanguageToText></LanguageToText>
</div> </div>
</div> </div>
</div> </div>
@@ -132,6 +99,7 @@
</template> </template>


<script> <script>
import LanguageToText from '@/components/languageToText.vue'
// 组件 // 组件
import Vue from "vue"; import Vue from "vue";
import { Toast } from "vant"; import { Toast } from "vant";
@@ -141,6 +109,9 @@ import { scrollToID } from "../../utils";


Vue.use(Toast); Vue.use(Toast);
export default { export default {
components: {
LanguageToText
},
data() { data() {
return { return {
inPage: false, inPage: false,
@@ -148,7 +119,7 @@ export default {
CameraAction:false,// 摄像头按钮状态 CameraAction:false,// 摄像头按钮状态
CloseChatAction:false,// 聊天框按钮状态 CloseChatAction:false,// 聊天框按钮状态
GlobalAction:false,// 语音按钮状态 GlobalAction:false,// 语音按钮状态
speakingAction: false, // 底部是否说话按钮状态
// speakingAction: false, // 底部是否说话按钮状态
modelList: [ modelList: [
{ name:'甘雨',url:require('../../assets/img/module_3_1.png')}, { name:'甘雨',url:require('../../assets/img/module_3_1.png')},
{ name:'莫甘娜',url:require('../../assets/img/module_3_1.png')}, { name:'莫甘娜',url:require('../../assets/img/module_3_1.png')},
@@ -291,27 +262,6 @@ export default {
height: 24px; height: 24px;
} }
} }
&-speakDiv {
display: flex;
justify-content: space-between;
margin-top: 20px;
padding: 0 15px;
&-text {
margin-top: 4px;
width: 290px;
height: 36px;
border-radius: 18px;
border: 1px solid #FFFFFF;
font-size: 14px;
color: #FFFFFF;
text-align: center;
line-height: 34px;
}
.whiteDiv {
background-color: #ececec;
color: #000;
}
}
} }
&-modelList { &-modelList {
position: relative; position: relative;
@@ -402,17 +352,6 @@ export default {
border-radius: 20px 20px 20px 2px; border-radius: 20px 20px 20px 2px;
} }
} }
.showBody-bottom-speakDiv {
margin-top: 0;
height: 85px;
padding-top: 15px;
background-color: #fff;
&-text {
color: #666;
border-radius: 18px;
border: 1px solid #666666;
}
}
} }
&-global { &-global {
position: absolute; position: absolute;
@@ -470,17 +409,6 @@ export default {
} }
} }
} }
.showBody-bottom-speakDiv {
margin-top: 0;
height: 85px;
padding-top: 15px;
background-color: #fff;
&-text {
color: #666;
border-radius: 18px;
border: 1px solid #666666;
}
}
} }
} }
} }


Loading…
Cancel
Save