|
@@ -0,0 +1,64 @@
|
|
|
+var customerCornerStyle = `<style>
|
|
|
+.customer-corner-component{
|
|
|
+ position: fixed;
|
|
|
+ padding-top:4px;
|
|
|
+ width: 42px;
|
|
|
+ height: 42px;
|
|
|
+ bottom: 9%;
|
|
|
+ right: 12px;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 50%;
|
|
|
+ z-index: 99;
|
|
|
+ box-shadow: 0 0 16px rgba(0,0,0,0.16);
|
|
|
+ font-size: 9px;
|
|
|
+ line-height: 10px;
|
|
|
+ color: #2ABED1;
|
|
|
+ }
|
|
|
+ .customer-corner-component.fadeOutRight{
|
|
|
+ transform: translateX(98%);
|
|
|
+ opacity: 0.2;
|
|
|
+ }
|
|
|
+ .customer-corner-component .content{
|
|
|
+ height:100%;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .customer-corner-component img{
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ }
|
|
|
+ </style>`
|
|
|
+var customerCornerTemplate = `
|
|
|
+<div class="customer-corner-component" :class="{ fadeOutRight: !scrollStatus }" :style="{bottom: bottomPosition || ''}">
|
|
|
+ <div class="content" @click="jumpCustomerPage">
|
|
|
+ <img src="/common-module/customer-corner/img/kf-blue.png" alt="">
|
|
|
+ <p>客服</p>
|
|
|
+ </div>
|
|
|
+ </div>`
|
|
|
+
|
|
|
+Vue.component('customer-corner-component',{
|
|
|
+ name: 'customerCornerComponent',
|
|
|
+ template: customerCornerTemplate,
|
|
|
+ props: {
|
|
|
+ scrollStatus: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ bottomPosition: {
|
|
|
+ type: String,
|
|
|
+ default: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ $('head').append(customerCornerStyle)
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ jumpCustomerPage () {
|
|
|
+ location.href = '/page_social_mobile/home?pname=剑鱼标讯&receiveAppId=465d475c52&userType=1'
|
|
|
+ }
|
|
|
+ }
|
|
|
+})
|