vue聊天室完善

<template>
    <div>
       <!-- 头部组件 -->
		<TopHeader custom-title="店铺名称" custom-fixed>
			<i slot="backBtn" class="iconfont icon-fanhui"></i>
            <span slot="rightBtn" class="rightBtn">店铺</span>
		</TopHeader>
        <!-- 聊天室 -->
        <div class="chat_room" ref="uldom">
            <!-- <div class="chat_item">
                    <img src="/static/images/details/00detailsSwiper-img01.png" class="touxiang"/>
                    <span class="text">您好您好您好您好</span>
            </div>  -->
             <!-- <div class="chat_item">
                    <img src="/static/images/category/category-goods-img01.png" class="touxiang2"/>
                    <span class="text2">您好哇</span>
            </div>-->

            <!-- <div class="chat_item" v-for="(item,index) in chattext" :key="index">
                    <img :src="item.img" :class='[item.status=="2" ? "touxiang" : "touxiang2"]'/>
                    <span :class='[item.status=="2" ? "text" : "text2"]'>{{item.text}}</span>
            </div>  -->

            
            <div class="chat_item" v-for="(item,index) in list" :key="index">
                <!-- item.head_pic -->
                    <img :src='[item.user_id === from_info_id ? from_info_header_pic : to_info_header_pic]' :class='[item.user_id != from_info_id ? "touxiang" : "touxiang2"]'/>
                    <span :class='[item.user_id != from_info_id ? "text" : "text2"]' v-if='item.msg_type==="1"'>{{item.content}}</span>
                    <img :src="item.content" :class='[item.user_id != from_info_id ? "tupian" : "tupian2"]' v-if='item.msg_type==="2"'  v-preview="item.content" preview-title-enable="true"
     preview-nav-enable="true"/>  
                    <!-- <audio ref="player" src="https://chuen.zhifengwangluo.cn/Public/weixinrecord/wxupload_15708641362349.amr"  controls></audio> -->
                    <!-- 录音 -->
                    <!-- <span class="hhhhhh" v-if='item.msg_type==="5"'>
                        <img @click="plays(item.content)" :class='[item.user_id != from_info_id ? "imgimg" : "imgimg2"]' v-if='item.msg_type==="5"' src="/static/images/chatroom/yuyin.gif"/> -->
                         <!-- @pause="onPause" -->
                        <!-- <audio :src="item.content" :class='[item.user_id != from_info_id ? "audio" : "audioaudio"]' controls ref="audio" ></audio>
                    </span> -->
                    <!-- autoplay="true" -->
                    <video  v-if='item.msg_type==="3"'  :class='[item.user_id != from_info_id ? "videovideo" : "video"]' muted="true" autoplay="true"> 
                         <source :src="item.content" type="video/mp4">
                    </video>
            </div>

        </div>

        
        <!-- 拍照 -->
        <van-uploader class="wrapper1" v-if="lalal" :after-read="afterRead" >
            <van-button icon="photo" type="primary">上传图片</van-button>
        </van-uploader>
        <!-- <van-uploader :after-read="afterRead" class="wrapper1" v-if="lalal" />     -->


        <!-- <span type="primary" class="wrapper1">
            <label class="btn" for="fileUploadimage"></label>
        </span>
        <input type="file"  capture="camera"  accept="image/*"  id="fileUploadimage" style="position:absolute; clip:rect(0 0 0 0);"  @change="uploadimage($event)"> -->
         <!-- 视频-->
         <span type="primary" class="wrapper2" v-if="lalal">
            <label class="btn" for="fileUpload" ></label>
        </span>
        <!-- camera  accept="video/*" capture="camcorder"-->
        <!-- <input type="file" id="fileUpload" style="position:absolute; clip:rect(0 0 0 0);"  @change="uploadVideo($event)"> -->
        <!-- <input type="file" name="video" id="fileUpload" @change="uploadVideo($event)" style="position:absolute; clip:rect(0 0 0 0);"/> -->
        <van-uploader style="z-index:999;position:fixed;left:95px;bottom:80px;" accept="video/*" v-if="lalal" :after-read="uploadVideo">
             <van-button icon="photo" type="primary">拍摄</van-button>
        </van-uploader>



        <!-- 底部 -->
        <div :class='[lalal==true ? "bottom2" : "bottom"]'>
            <!-- @click="lule" -->
            <img src="/static/images/home/jianpan.png" class="jianpan" />
            <textarea class="wenbenyu" v-model="neirong" v-if="shuru"></textarea>
             <!-- @click="shuohua" -->
            <span class="luyin" v-if="!shuru" @touchstart.prevent="showDeleteButton()" @touchend.prevent="clearLoop()">按住说话</span>
            <span class="fasong" @click="fasong">发送</span>
            <img src="/static/images/home/gengduo.png" class="gengduo" @click="chuxian"/>
        </div>

        <!-- 功能 -->
        <div class="mask" @click="shouqi" v-if="lalal">
            <!-- v-if="lalal" -->
            <div class="gongneng">
                    <div class="gongneng_item" @click="shiping">
                        <img src="/static/images/home/xiangce.png" class="xiangce"/>
                        <p class="zi">照片</p>
                    </div>
                    <div class="gongneng_item" @click="paizhao">
                        <img src="/static/images/home/paishe.png" class="paishe"/>
                        <p class="zi">视频</p>
                    </div>
            </div>
        </div>
      
   

        <!-- 图片预览插件 -->
        <lg-preview></lg-preview>




    </div>  
</template>
<script>
import Vue from 'vue'
// import AreaList from './area'
import TopHeader from "@/pages/common/header/TopHeader"
// import wx from 'weixin-js-sdk';
// import BenzAMRRecorder from 'benz-amr-recorder'
// var amr = new BenzAMRRecorder();
const _this = wx
export default {
    name:'chatroom',
    components:{
        TopHeader
    },
    data(){
        return {
           neirong:"",
           lalal:false,
           shuru:true,
           chattext:[
               {img:'/static/images/details/00detailsSwiper-img01.png',text:'您好,您好,您好',status:2},
               {img:'/static/images/category/category-goods-img01.png',text:'您好哇',status:1},
               {img:'/static/images/category/category-goods-img01.png',text:'您好lalall哇',status:1}
           ],
           Loop:null,
           localId: '',
           serverId: '',
           downLoadId: '',
           Soff: true,
           time: 0,
           timer: null,
           isFrist:true,
           toid:null,
           token:this.$store.getters.optuser.Authorization,
           list:[],
           from_info_header_pic:'',
           to_info_header_pic:'',
           client_name:'',
           from_info_id:null,
           to_info_id:null,
           login_data:null,
           websoketurl:'',
           biaoshi:null,
           lujing:''
        }
    },
    created(){
        console.log(location.protocol)
        let websoketurl = location.protocol === 'https:'  ? 'wss://chat.zhifengwangluo.com:7575'  : 'wss://chat.zhifengwangluo.com:7575';
        this.websoketurl = websoketurl;
        console.log(this.websoketurl);

        this.biaoshi=this.$route.query.biaoshi
        console.log("UUUUUUU",typeof(this.biaoshi))

        //  店铺id
        if(this.$route.query.biaoshi !='1'){
            this.toid=this.$route.query.toid
        }else{
            this.toid=this.$route.query.to_userid
        }  
        console.log("1111") 
        console.log(this.toid)
        // 调用微信录音,获取签名与相关配置
        var apiUrl = window.location.href
        // let apiUrl = 'http://weixin.lostars.cn'
        this.$axios({
            method: 'get',
            url: 'weixin/getSignPackage?askUrl='+apiUrl, // 写入api
        })
        .then((res) => {
        //   console.log(res.data)
          let list = res.data
        //   console.log(list.appId)
          _this.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: list.appId, // 必填，公众号的唯一标识
            timestamp: list.timestamp, // 必填，生成签名的时间戳
            nonceStr: list.nonceStr, // 必填，生成签名的随机串
            signature: list.signature, // 必填，签名
            jsApiList: ['startRecord', 'stopRecord', 'playVoice', 'pauseVoice', 'stopVoice', 'uploadVoice', 'downloadVoice', 'downloadVoice'] // 必填，需要使用的JS接口列表
            // 接口 开始录音接口 停止录音接口 播放语音接口 暂停播放接口 停止播放接口 上传语音接口 下载语音接口 识别音频并返回识别结果接口
          })
          // config信息验证后才执行
          _this.ready(() => {
            console.log("ok")
          })
          // 微信sdk错误返回问题
          _this.error((res) => {
            alert('出错了：' + res.errMsg)// 这个地方的好处就是wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
          })
        })
        .catch((error) => {
          console.log(error)
        })
        // 页面数据渲染
        var that = this;
        var params = new URLSearchParams();
        params.append('toid', this.toid);         //你要传给后台的参数值 key/value
        params.append('token', this.token);       //你要传给后台的参数值 key/value
        if(this.$route.query.biaoshi === '1' || this.$route.query.biaoshi === 1){
             //列表
             console.log("为什么呢1")
             params.append('sender', 1);
        }else{
            console.log("为什么呢2")
            //商品详情 
            params.append('sender', 2);
        } 
        var url = "chat/get_userinfo"
        that.$axios({
            method:"post",
            url:url,
            data: params
        }).then((res)=>{
            if(res.data.status == 200){ 
                // console.log('ssss')
                // console.log(res.data.data.from_info.head_pic) 
                this.from_info_header_pic= res.data.data.from_info.head_pic
                this.from_info_id=res.data.data.from_info.user_id
                this.to_info_id=res.data.data.to_info.user_id  
                console.log("to_info_id",this.to_info_id)
                this.client_name=res.data.data.from_info.nick_name  
                this.to_info_header_pic= res.data.data.to_info.head_pic
                this.lianjie()
                 //页面数据渲染聊天信息
                var params2 = new URLSearchParams();
                params2.append('token', this.token);       //你要传给后台的参数值 key/value 
                // this.to_info_id
                params2.append('toid',this.to_info_id);    
                var url = "chat/load"
                that.$axios({
                    method:"post",
                    url:url,
                    data: params2
                }).then((res)=>{
                    console.log(res.data.data)       
                    that.list=res.data.data
                    setTimeout(function(){
                        window.scrollTo(0,document.documentElement.clientHeight)
                    },10)
                    
                })
                        
                    }         
                })  
        
         

      },
    methods:{
        fasong:function(){
            var that=this
            that.lalal=false
            // console.log(this.neirong)  
            if(this.neirong!=""){
                var a=this.$refs.uldom.lastChild
                var b=this.$refs.uldom.children
                for(var i=0;i<b.length;i++){
                    this.$refs.uldom.children[i].style.marginBottom="0px"
                }
                this.list.push({head_pic:this.from_info_header_pic,content:this.neirong,user_id:this.from_info_id,msg_type:"1"})
                // a.style.marginBottom="30px"
                var gaodu=document.documentElement.clientHeight+300 
                console.log(gaodu)
                setTimeout(function(){
                    window.scrollTo(0,gaodu)
                },10)
                var neinei=that.neirong
                console.log("UUUUUUU")
                that.lianjie(1,neinei)  

            } 
             
            this.neirong=[]
            
        },
        // 上传的是图片
         afterRead(file) {
            var that=this
            // 此时可以自行将文件上传至服务器
            console.log(file.content); 
            // 图片压缩的操作
            let canvas =  document.createElement('canvas')        // 创建Canvas对象(画布)
            let context = canvas.getContext('2d') 
            let img = new Image()                   // 创建新的图片对象 
            // 指定图片的DataURL(图片的base64编码数据)
            img.src = file.content
            img.onload =() =>{
                  canvas.width =400
                  canvas.height =300
                  context.drawImage(img,0,0,400,300)
                  file.content =canvas.toDataURL(file.file.type,0.92)
                  var params2 = new URLSearchParams();
                   //params2.append('token', this.token);       //你要传给后台的参数值 kevalue 
                    params2.append('image', file.content);   
                    var url = "chat/create_img"
                    this.$axios({
                        method:"post",
                        url:url,
                        data: params2
                    }).then((res)=>{
                         console.log(res.data.result) 
                        // this.fileList.push(res.data.result)
                        // console.log(this.fileList)
                        this.lalal=false
                        var a=this.$refs.uldom.lastChild
                        a.style.marginBottom="20px" 
                        this.list.push({head_pic:this.from_info_header_pic,content:file.content,user_id:this.from_info_id,msg_type:"2"})
                        var gaodu=document.documentElement.clientHeight+300 
                        console.log(gaodu)
                        setTimeout(function(){
                            window.scrollTo(0,gaodu)
                        },10)
                        var neinei=res.data.result
                        that.lianjie(2,neinei)                
                       })
             }
        },
        // 加号
        chuxian:function(){
            this.lalal=true
            var a=this.$refs.uldom.lastChild
            a.style.marginBottom="190px"
            // console.log(this.$refs.uldom.lastChild)
           window.scrollTo(0,document.documentElement.clientHeight)

        },
        shouqi:function(){
            this.lalal=false
             var a=this.$refs.uldom.lastChild
             var b=this.$refs.uldom.children
             for(var i=0;i<b.length;i++){
                    this.$refs.uldom.children[i].style.marginBottom="0px"
                }
             a.style.marginBottom="60px"
        },
        // 拍视频
        shiping:function(){
            
        },
        lule:function(){
            this.shuru=false
        },
        // shuohua:function(){
        //     console.log("222") 
        // },
        // 长摁开始录音
        showDeleteButton:function(){
          var that=this;
          this.Loop = setTimeout(function() {
          that.Loop = 0;
          that.$toast("start")
          that.time = 0
          _this.startRecord({
            success: function () {
            //   alert('成功调起录音')
              that.timer = setInterval(() => {
                that.time++
              }, 1000)
              that.vicoeEnd()
            },
            cancel: function () {
              // alert('用户拒绝授权录音')
            }
          })
            }, 700);
            },
          // 放开结束录音
          clearLoop:function(){
            clearTimeout(this.Loop)
            this.$toast("end")
              let that = this
              _this.stopRecord({
                success: function (res) {
                  // alert('暂停成功')
                  console.log(res)
                  clearInterval(that.timer)
                  that.localId = res.localId
                  that.upVoice()
                },
                fail: function (error) {
                  // alert('死啦停不了')
                  console.log(error)
                }
            })
        },
         // 60秒监听
        vicoeEnd () {
          let that = this
          _this.onVoiceRecordEnd({
            // 录音时间超过一分钟没有停止的时候会执行 complete 回调
            complete: function (res) {
              // alert('60秒停止录音')
              that.localId = res.localId
              clearInterval(that.timer)
              that.upVoice()
            }
          })
        },
        //拍照
        paizhao:function(){
            
        },
         // 上传语音
          upVoice () {
            let that = this
            //alert("上传语音")
            _this.uploadVoice({
              localId: that.localId, // 需要上传的音频的本地ID，由stopRecord接口获得
              isShowProgressTips: 1, // 默认为1，显示进度提示
              success: function (res) {
                var apiUrl = window.location.href
                //alert('上传成功')
                that.serverId = res.serverId // 返回音频的服务器端ID
                // that.axios({
                //   method: 'post',
                //   url: 'chat/upload',
                //   headers: {'Content-Type': 'application/json'},
                //   data: {
                //     media_id: res.serverId
                //   }
                // })
                //   .then((data) => {
                //     console.log(data)
                //     alert(data.data)
                //     that.$refs.player.src = data.data
                //   })
                //   .catch((error) => {
                //     console.log(error)
                //   })
                //  alert("ssss")
                 let params = new URLSearchParams();
                    params.append('media_id',that.serverId);
                    that.$axios.post('chat/upload',params)
                    .then((res)=>{
                         console.log(res.data.path)
                        //  获取到的amr传给后台
                        //alert(res.data.path)
                        that.lujing=res.data.path
                        that.list.push({head_pic:that.from_info_header_pic,content:res.data.path,user_id:that.from_info_id,msg_type:"5"})
                         //滚动条置底
                         setTimeout(function(){
                            window.scrollTo(0,document.documentElement.clientHeight)
                        },10)
                        //  that.list.push({head_pic:this.to_info_header_pic,content:res.data.path,user_id:this.from_info_id,msg_type:"5"})     
                         var neinei=res.data.path
                         that.lianjie(5,neinei)
                    })
            }
        })
          },
       	plays(url) {
		//   amr.initWithUrl(url).then(function() {
		//     amr.isPlaying() //返回音频的播放状态 是否正在播放 返回boolean类型
		//     console.log(amr.isPlaying())
		//     if(amr.isPlaying()){
		//       amr.stop();
		//     } else {
		//       amr.play();
		//     }
        //   });
        console.log("播放路径为:",url)
        // console.log(players.play())
        // var players=document.getElementsByClassName("players")
        // players.play();
        // console.log(players.play())


        // let audio = new Audio()
        // audio.src ='https://chuen.zhifengwangluo.cn/Public/weixinrecord/wxupload_15711951466666.mp3'
        // audio.play();

        // this.onPlay()





        },
        onPlay(){
         console.log("sss")
         this.audio.play = true
         
        },
        uploadVideo(file) {
                //e.target.value文件名
                // var file = e.target.files[0];
                // console.log("miaomiao")
                // console.log(file)
                console.log(file)
                console.log(file.file)
                var formdata = new FormData();
                formdata.append('video', file.file);
                console.log('正在上传视频...')
                this.doUpload(formdata);
                // // 置空input
                // e.target.value = null
               


                
        },
        // uploadimage(e){
        //         //e.target.value文件名
        //         var file = e.target.files[0];
        //         console.log('正在上传照片')
        //         this.doUpload(formdata);
        // },    
        doUpload(formdata) {
            var that=this
            // axios.post('/teacher/doUpload', formdata).then(res => {
            //     if (res.data.success) {
            //         console.log('上传成功');
            //     } else {
            //         console.log('上传失败');
            //     }
            // }).catch(err => {
            //     console.log(err);
            // })
          
          console.log(formdata)
          that.$axios({
                    method:"post",
                    url:'chat/upload_videos',
                    data: formdata
                }).then((res)=>{
                    console.log(res.data.data.path)        
                    that.lalal=false
                    var a=this.$refs.uldom.lastChild
                    var b=this.$refs.uldom.children
                    for(var i=0;i<b.length;i++){
                    this.$refs.uldom.children[i].style.marginBottom="0px"
                     }
                    that.lianjie(3,res.data.data.path)
                    that.list.push({head_pic:this.from_info_header_pic,content:res.data.data.path,user_id:this.from_info_id,msg_type:"3"})              
                })
        
        },
        //连接服务器
        lianjie:function(type,neirongya){
            var that=this
            if (window.WebSocket){
              
                let ws =new WebSocket( this.websoketurl )
                ws.onopen = function (e) {
                    console.log("连接成功")
                    console.log(that.neirong)
                     // 如果是第一次进入聊天室
                     if(that.isFrist){
                         that.isFrist=false    
                        //初始化时执行
                        // var login_data = '{"type":"login","client_name":"张耘翡","ud_type":"1","ud_id":"63"}'
                       
                        console.log(that.client_name)
                        that.login_data = '{"type":"login","client_name":"'+that.client_name+'","ud_type":"1","ud_id":"'+that.from_info_id+'"}'
                        console.log("第一次连接成功")
                     }else{ 
                            // console.log("------------")
                            // console.log(that.neirong)
                            // console.log("------------+++++++")  
                            console.log("type",type)
                            console.log("neinei",neirongya)
                            console.log("client_name",that.client_name)
                            console.log("content",neirongya)
                            console.log("ud_id",that.from_info_id)
                            console.log("to_id",that.to_info_id)
                            that.login_data = '{"type":"say","say_type":"'+type+'","to_client_name":"'+that.client_name+'","content":"'+neirongya+'","ud_type":"1","ud_id":"'+that.from_info_id+'","to_id":"'+that.to_info_id+'"}';
                             //that.login_data ='{"type":"say","say_type":"1","to_client_name":"医生_小智","content":"这个衣服多少钱","ud_type":"2","ud_id":"1418","to_id":"1403"}'   
                        }
                        // console.log(that.login_data)
                      ws.send(that.login_data);  
                };
                ws.onclose = function (e) {
                    console.log("服务器关闭")
                    that.$toast("网络出错,服务器关闭")
                };
                ws.onerror = function () {
                    console.log("服务器出错")
                    that.$toast("服务器出错,自动关闭")
                };
                // 服务器返回来的数据
                ws.onmessage = function (e) {
                    console.log(e)
                    var info =JSON.parse(e.data)
                    console.log(info)
                    if(info.type==="login"){
                        ws.send('{"type":"pong"}');
                        return;
                    }
                    if(info.type==="ping"){
                        ws.send('{"type":"pong"}');
                        return;
                    }
                    console.log(info.content)
                    console.log(info.say_type)
                    that.list.push({head_pic:that.from_info_header_pic,content:info.content,user_id:that.to_info_id,msg_type:info.say_type})
                    // tianjia(info.content,info.say_type)
                    setTimeout(function(){
                        window.scrollTo(0,document.documentElement.clientHeight)
                    },10)
                    
                   
                    
                }
            }
        }
      
            
        }
}
</script>
<style lang="stylus" scoped>
.rightBtn
    color white !important 
    background #2095d4 !important
    width 85px !important
    text-align center !important
    height 45px !important
    line-height 44px !important
    border-radius 20px !important
    text-align center !important
    padding-right: 0rem !important;
    position: absolute !important;
    right: 20px !important;
    top:25px !important
    font-size 25px
    padding 0 !important
.chat_room
    width 90%
    margin-left 5%
    // margin-top 145px
    .chat_item
        width 100%
        height 80px
        position relative
        margin-top 50px
        .touxiang
            width 80px
            height 80px
            border-radius 50%
            position absolute
            top 0
            bottom 0
            margin auto 0
        .touxiang2
            width 80px
            height 80px
            border-radius 50%
            position absolute
            right 0
            top 0
            bottom 0
            margin auto 0
        .tupian
            width 85px
            height 85px
            position absolute
            top 0
            bottom 0
            left 95px
            margin auto 0
        .tupian2
            width 85px
            height 85px
            position absolute
            right 100px
            top 0
            bottom 0
            margin auto 0
        .text
            display inline-block
            padding 0px 20px
            border-radius 20px
            display inline-block
            background white
            position absolute
            left 100px
            top 14px
            margin auto 0
            padding 10px 20px
        .text2
            display inline-block
            padding 0px 20px
            border-radius 20px
            display inline-block
            background white
            position absolute
            top 14px
            right 100px
            margin auto 0
            padding 10px 20px
        .hhhhhh
            width 100px
            height 55px
            display inline-block
            // border 1px solid red
            position absolute
            right 100px
            top 14px
            .imgimg
                display inline-block
                padding 0px 20px
                border-radius 20px
                display inline-block
                background white
                position absolute
                right 10px
                top 0px
                margin auto 0
                padding 10px 20px 
                width 50px
                height 35px
                z-index 2
            .imgimg2
                display inline-block
                padding 0px 20px
                border-radius 20px
                display inline-block
                background white
                position absolute
                left 10px
                top 0px
                margin auto 0
                padding 10px 20px 
                width 50px
                height 35px
                z-index 2
            .audio
                display inline-block
                padding 0px 20px
                border-radius 20px
                display inline-block
                background white
                position absolute
                right 10px
                top 0px
                margin auto 0
                padding 10px 20px 
                width 50px
                height 35px 
                z-index 1 
            .audioaudio
                display inline-block
                padding 0px 20px
                border-radius 20px
                display inline-block
                background white
                position absolute
                left 10px
                top 0px
                margin auto 0
                padding 10px 20px 
                width 50px
                height 35px  
                z-index 1         
        .video
            display inline-block
            padding 0px 20px
            border-radius 20px
            display inline-block
            position absolute
            right 70px
            top -15px
            margin auto 0
            padding 10px 20px
            width 100%
            height 500px
            width 100px
            height 100px 
        .videovideo
            display inline-block
            padding 0px 20px
            border-radius 20px
            display inline-block
            position absolute
            left 80px
            top -20px
            margin auto 0
            padding 10px 20px 
            width 100%
            height 500px
            width 100px
            height 100px     
.chat_room .chat_item:last-child
    margin-bottom:145px            
.wrapper1
    display inline-block
    height 148px
    width 120px
    position fixed
    bottom 150px
    left 25px
    z-index 99
.wrapper1 >>> .van-button__text   
        display none
.wrapper1 >>>  .van-button__icon
        display none
.wrapper1 >>>  .van-uploader__input-wrapper
        // border 1px solid red
        width 310px
        height 150px 
.wrapper1 >>> .btn
        width 100%
        height 100%
        display inline-block
.wrapper1 >>> .van-button--primary
    background-color: transparent;
    border: 1px solid transparent;
.wrapper2
    display inline-block
    width 130px
    height 138px
    position fixed
    bottom 150px 
    left 180px
    z-index 99
    .btn
        width 100%
        height 100%
        display inline-block   
.bottom 
    width 100%
    height 88px
    position fixed
    bottom 0
    background white
    z-index 2
    .jianpan
        width 48px
        height 48px
        position absolute
        left 30px
        top 0
        bottom 0
        margin auto 0
    .wenbenyu
        width 450px
        height 50px
        line-height 50px
        position absolute
        left 100px
        top 0
        bottom 0
        margin auto 0
        background #f5f5f5
        border none
        border-radius 20px
        outline:none
        resize:none
        text-indent 20px 
    .luyin
        display inline-block
        width 450px
        height 50px
        line-height 50px
        position absolute
        left 100px
        top 0
        bottom 0
        margin auto 0
        background #f5f5f5
        border none
        border-radius 20px
        outline:none
        resize:none
        background white
        text-align center
        box-shadow 0 0 10px #eee
    .fasong
        width 100px
        height 50px
        line-height 50px
        border-radius 20px
        position absolute
        right 90px
        top 0
        bottom 0
        margin auto 0
        background #2095d4
        color white
        text-align center
    .gengduo
        width 48px
        height 48px
        position absolute
        right 30px
        top 0
        bottom 0
        margin auto 0
.bottom2 
    width 100%
    height 88px
    position fixed
    bottom 300px
    background white
    z-index 2
    .jianpan
        width 48px
        height 48px
        position absolute
        left 30px
        top 0
        bottom 0
        margin auto 0
    .wenbenyu
        width 450px
        height 50px
        line-height 50px
        position absolute
        left 100px
        top 0
        bottom 0
        margin auto 0
        background #f5f5f5
        border none
        border-radius 20px
        outline:none
        resize:none
        text-indent 20px 
    .luyin
        display inline-block
        width 450px
        height 50px
        line-height 50px
        position absolute
        left 100px
        top 0
        bottom 0
        margin auto 0
        background #f5f5f5
        border none
        border-radius 20px
        outline:none
        resize:none
        background white
        text-align center
        box-shadow 0 0 10px #eee
    .fasong
        width 100px
        height 50px
        line-height 50px
        border-radius 20px
        position absolute
        right 90px
        top 0
        bottom 0
        margin auto 0
        background #2095d4
        color white
        text-align center
    .gengduo
        width 48px
        height 48px
        position absolute
        right 30px
        top 0
        bottom 0
        margin auto 0
.mask
    position fixed
    left 0
    right 0
    bottom 0
    top 0
    z-index 1
    .gongneng
        position fixed
        bottom 0
        z-index 1
        width 100%
        height 300px   
        background white 
        z-index 5
        .gongneng_item
            display inline-block
            width 100px
            text-align center
            margin-top 40px
            margin-left 40px
            .xiangce
                width 65px
                height 55px
            .paishe
                width 65px
                height 55px
            .zi 
                padding-top 10px
.lg-preview-wrapper >>> .lg-preview-nav-arrow
    width 20px !important
    height 20px !important
    position absolute !important
    top 53% !important
.van-button--primary
    color: transparent; 
    background-color: transparent; 
    border: 1px solid transparent; 
.lg-preview-wrapper >>> .lg-preview-img
    height 800px
    width 100%
</style>