|
@@ -9,7 +9,8 @@
|
|
<div class="chat-con" :class="{active:showAside}">
|
|
<div class="chat-con" :class="{active:showAside}">
|
|
<div class="c-top">
|
|
<div class="c-top">
|
|
<img :src="language === 'en'?`${$cdn}images/chat-logo-en.png`:`${$cdn}images/chat-logo.png`" alt>
|
|
<img :src="language === 'en'?`${$cdn}images/chat-logo-en.png`:`${$cdn}images/chat-logo.png`" alt>
|
|
- <p v-html="langChat.title"></p>
|
|
|
|
|
|
+ <p :style="{'font-size':language === 'en'?'14px':'16px'}" v-html="langChat.title"></p>
|
|
|
|
+ <img v-if="language !== 'en'" class="wechat-qr" :src="`${$cdn}images/chat-ecode.jpg`" alt>
|
|
<!-- <div class="avatar">
|
|
<!-- <div class="avatar">
|
|
<div v-for="(item,i) in kefu" :key="i">
|
|
<div v-for="(item,i) in kefu" :key="i">
|
|
<img :src="item.avatar" alt="">
|
|
<img :src="item.avatar" alt="">
|
|
@@ -17,10 +18,13 @@
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
- <div class="c-bottom">
|
|
|
|
- <div class="input"><input autocomplete="off" ref="sInput" v-model="email" :placeholder="langChat.p1" type="text"></div>
|
|
|
|
- <!-- <div class="input"><input autocomplete="off" v-model="phone" :placeholder="langChat.p2" type="text"></div> -->
|
|
|
|
- <div class="input"><textarea v-model="content" :placeholder="langChat.p3" type="text" /></div>
|
|
|
|
|
|
+ <div :class="{'c-bottom':true,'c-b-en':language === 'en'}" >
|
|
|
|
+ <div class="cb-input">
|
|
|
|
+ <div class="cb-title" v-if="language !== 'en'">请留言</div>
|
|
|
|
+ <div class="input"><input autocomplete="off" ref="sInput" v-model="email" :placeholder="langChat.p1" type="text"></div>
|
|
|
|
+ <!-- <div class="input"><input autocomplete="off" v-model="phone" :placeholder="langChat.p2" type="text"></div> -->
|
|
|
|
+ <div class="input"><textarea v-model="content" :placeholder="langChat.p3" type="text" /></div>
|
|
|
|
+ </div>
|
|
<div class="btn" @click="send">{{langChat.send}}</div>
|
|
<div class="btn" @click="send">{{langChat.send}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -168,7 +172,6 @@ $lincolor:#d0d0d1;
|
|
.img-active{
|
|
.img-active{
|
|
opacity: 1;
|
|
opacity: 1;
|
|
transform: translate(-50%,-50%) scale(1);
|
|
transform: translate(-50%,-50%) scale(1);
|
|
-
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.chat-con{
|
|
.chat-con{
|
|
@@ -189,12 +192,18 @@ $lincolor:#d0d0d1;
|
|
.c-top{
|
|
.c-top{
|
|
background-color: #2ae1d7;
|
|
background-color: #2ae1d7;
|
|
color: #2d2d2d;
|
|
color: #2d2d2d;
|
|
- padding: 20px 10%;
|
|
|
|
- height: 131px;
|
|
|
|
|
|
+ padding: 23px 7% 26px;
|
|
position: relative;
|
|
position: relative;
|
|
- &>img{
|
|
|
|
- margin-bottom: 10px;
|
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ &>img:first-of-type{
|
|
|
|
+ margin-bottom: 6px;
|
|
|
|
+ }
|
|
|
|
+ .wechat-qr{
|
|
|
|
+ max-width: 120px;
|
|
|
|
+ max-height: 120px;
|
|
|
|
+ margin-top: 20px;
|
|
}
|
|
}
|
|
|
|
+
|
|
.avatar{
|
|
.avatar{
|
|
display: flex;
|
|
display: flex;
|
|
text-align: center;
|
|
text-align: center;
|
|
@@ -211,16 +220,24 @@ $lincolor:#d0d0d1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
.c-bottom{
|
|
.c-bottom{
|
|
- height: calc(503px - 131px - 20px);
|
|
|
|
- padding:0 10%;
|
|
|
|
|
|
+ height: calc(503px - 261px - 20px);
|
|
|
|
+ padding:10px 0 0 7%;
|
|
position: relative;
|
|
position: relative;
|
|
|
|
+ .cb-title{
|
|
|
|
+ color: #a5a5a5;
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ }
|
|
|
|
+ .cb-input{
|
|
|
|
+ width: 252px;
|
|
|
|
+ }
|
|
.btn{
|
|
.btn{
|
|
bottom: 20px;
|
|
bottom: 20px;
|
|
right: 20px;
|
|
right: 20px;
|
|
position: absolute;
|
|
position: absolute;
|
|
background-color: #2ae1d7;
|
|
background-color: #2ae1d7;
|
|
- width: 90px;
|
|
|
|
|
|
+ width: 72px;
|
|
text-align: center;
|
|
text-align: center;
|
|
line-height: 30px;
|
|
line-height: 30px;
|
|
height: 30px;
|
|
height: 30px;
|
|
@@ -228,6 +245,13 @@ $lincolor:#d0d0d1;
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+ .c-b-en{
|
|
|
|
+ height: calc(503px - 131px - 20px);
|
|
|
|
+ padding:0 7%;
|
|
|
|
+ .cb-input{
|
|
|
|
+ width: 100%;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
}
|
|
}
|
|
.active{
|
|
.active{
|
|
max-height: 503px;
|
|
max-height: 503px;
|