前端入门级别技术编写仿微信对话框页面

作者: 景阳冈大虫在此 | 来源:发表于2017-11-01 18:08 被阅读0次

emm，前阵子薛之谦伪造微信截图的事情还历历在目，今天刚好有空把之前拿来练手的仿微信对话框的页面拿来分享，学好前端知识，至少有门手艺做一个像样的截图嘛。
先提前说明，这个页面，与其说是vue项目，更适合称之为css练手项目。今日的翻阅，发现其中vue的代码写得惨不忍睹，并没有发扬组件的思想，只不过是强行把js塞入vue罢了。
当做一个有意思的前端入门小练习就好，再不济至少还能造个微信聊天截图么不是。
最后的效果是这样的。

最终结果图

结构图

这个页面分为三个部分，上中下，上下两个部分始终悬浮在屏幕的上下方
html

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ac.ppdaicdn.com/js/jquery.js"></script>
        <title>WeLovechat</title>
        <meta charset="utf-8">
        <link href="css/note.css" rel="stylesheet">
    </head>
    <body>
        <div id="app">
            <div class="up">
                <span class="arrow arrow-left "></span>
                <span class="vertical-line"></span>
                <input class="up-input" value="肯德基">
                <span class="img-people">![](img/rentou.png)</span>
            </div>
            <chatinput :dialogue-array='dialogueArray'></chatinput>
        </div>
        <template id="chatinput">
            <div class="content">
                <div v-for="(dia,index) in dialogueArray" class="dialogue">
                    <div v-if="dia.direction==0">
                        <div class="headimgLeft"></div>
                        <div class="dialogue-left" >
                            <div class="dialogue-show">{{dia.cin}}</div>
                        </div>
                    </div>
                    <div v-if="dia.direction==1">
                        <div class="headimgRight"></div>
                        <div class="dialogue-right">
                            <div class="dialogue-show">{{dia.cin}}</div>
                        </div>
                    </div>
                </div>

                <div class="down">
                    <div class="img-voice">

                        <a href="javascript:;" v-on:click="addLeft()">
                            ![](img/voice.png)
                        </a>
                    </div>

                    <input class="line-input" @keyup.enter="addRight()">
                    <div class="img-smile">
                        ![](img/smile.png)
                    </div>
                    <div class="add-icon"></div>
                </div>
            </div>

        </template>


    </body>
    <script src="js/vue.js"></script>
    <script src="js/chat.js"></script>

</html>

css

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent ;}
body{background-color: #EBEBEB;}
.up{
    height: 137px;
    width: 100%;
    background: #393A3F;
    position: fixed;    
    z-index: 2;
    top:0;

}
.content{
    margin-top: 137px;
    margin-bottom: 137px;
}
.listIcon{
    height: 20px;
    width:20px;
    background: #FFF;
    right:10px;
    top:22px;
    position: absolute;
    cursor: pointer;
}
.listIcon:before{
    font-family: 'iconic';
    font-style: normal;
    speak: none;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    font-smoothing: antialiased;
    font-size: 24px;
    content:"#";
}
.triangle{
    width: 0;
    height: 0;
    border:50px solid transparent;
    /*border-left:50px solid red;
    border-bottom:50px solid blue;*/
    border-top:50px solid black;
    /*border-right:50px solid purple*/
}
.chat{
    position: absolute;
    box-sizing: border-box;
    display: inline;
    width: 150px;
    height: 36px;
}
.dialogue{
    overflow: hidden;
    margin-bottom: 38px;
}
div .dialogue-left,div .dialogue-right{
    margin-bottom: 33px;
}
.dialogue-left ,.dialogue-right {
    margin-left: 150px;
    top: 18px;
    position: relative;
    max-width: 50%;
    /*height: 100px;*/
    border: 2px solid #D4D4D4;
    border-radius: 10px;
    background-color: #fff;
    display: inline-block;
    padding: 24px;
    z-index: 1;
    width: fit-content;
}

.dialogue-left:before {
    content: "";
    position: absolute;
    border-style: solid;
    border-color: transparent #D4D4D4  transparent  transparent;
    border-width: 20px;
    margin-left: -66px;
    margin-top: 6px;
    z-index: 0;
}
.dialogue-left:after {
    content: "";
    position: absolute;
    border-style: solid;
    border-color: transparent #fff transparent transparent;
    border-width: 21px;
    margin-left: -65px;
    margin-top: -47px;
    z-index: 1;
}
.dialogue-right{
    background-color: #A0E75A;
    border: 1px solid #74BE50;
    float: right;
    margin-right: 156px;
}
.dialogue-right:before {
    content: "";
    position: absolute;
    border-style: solid;
    border-color: transparent  transparent  transparent #A0E75A;
    border-width: 20px;
    right: -38px;
    top: 34px;
    z-index: 1;
}
.dialogue-right:after {
    content: "";
    position: absolute;
    border-style: solid;
    border-color: transparent  transparent  transparent #74BE50;
    border-width: 19px;
    right: -38px;
    top: 35px;
    
}
.dialogue-show{
    background: transparent;
    border-color: transparent;
    /*display: inline-block;
    position: absolute;*/
    box-sizing: border-box;
    font-size: 40px;
    /*max-width: 100%;*/
    word-wrap: break-word;
    max-width: 100%;
/*  margin-top: 20px;
    margin-left: 29px;*/
}

/*.arrow {
  width: 40px;
  height: 40px;
  position: relative;
  display: inline-block;
  margin: 10px 10px;
}*/
.arrow{
    left:56px;
    top:56px;
    width: 30px;
    height: 30px;
    border-top: 6px solid #FFF;
    border-left: 6px solid #FFF;
    transform:rotate(-45deg);
    position: relative;
    display: inline-block;
}
.arrow:before, .arrow:after {
    content: '';
    border-color: transparent;
    border-style: solid;
    position: absolute;
}
.arrow-left:before {
    border: none;
    background-color: #FFF;
    height: 6px;
    width: 130%;
    top: 41%;
    left: -19%;
    transform: rotate(45deg);
}
.vertical-line{
    width:2px;
    height: 65px;
    background-color: #2E2F33;
    display: inline-block;
    left:134px;
    top:40px;
    position: absolute;
}
.up-input{
    background: transparent;
    color: #E2E2E2;
    max-width: 500px;
    height: 65px;
    display: inline-block;
    position: absolute;
    left:166px;
    top:40px;
    font-size: 49px;
    border-color: transparent;
    letter-spacing:3px;
    z-index: 3;
}
.img-people{
    display: inline-block;
    position: absolute;
    height: 60px;
    width: 60px;
    top:40px;
    right:37px;
}
.down{
    height: 130px;
    width: 100%;
    background: #F4F4F4;
    position: fixed;
    bottom: 0;
    border-width: 1px 0 0 0;
    border-style: solid;
    border-color: #DCDCDC;
    z-index: 2;
}
.add-icon{
    height: 83px;
    width: 83px;
    border: 2.5px solid #6F7378;
    border-radius: 50%;
    right:33px;
    bottom: 20px;
    position: absolute;
    background-color: transparent;
}
.add-icon:before {
    content: "";
    position: absolute;
    height: 60px;
    width: 6px;
    background-color: #6F7378;
    margin-top: 10px;
    right: 39px;
}
.add-icon:after {
    content: "";
    position: absolute;
    width : 60px;
    height: 6px;
    background-color: #6F7378;
    bottom: 39px;
    right: 12px;
}
.img-voice{
    display: inline-block;
    position: absolute;
    height: 83px;
    width: 83px;
    border: 2.5px solid #6F7378;
    border-radius: 50%;
    left: 39px;
    bottom: 20px;
}
.img-smile{
    display: inline-block;
    position: absolute;
    height: 83px;
    width: 83px;
    border: 2.5px solid #6F7378;
    border-radius: 50%;
    right: 165px;
    bottom: 20px;
}
.line-input {
    position: absolute;
    border-style: solid;
    border-color: #6F7378;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 1px;
    border-left-width: 0px;
    min-width: 560px;
    min-height: 90px;
    background: transparent;
    bottom: 20px;
    left:146px;
    font-size: 40px;
    max-width: 50%;
}
.headimgLeft ,.headimgRight{
    position: absolute;
    display: inline-block;  
    margin-top: 19px;
    margin-left: 20px;
    height: 100px;
    width: 100px;
}
.headimgLeft{
    background: url(../img/head1.png);
    background-size:100% 100%;
    background-repeat:no-repeat;
    float:left;
}
.headimgRight{  
    background: url(../img/right.jpg);
    background-size:100% 100%;
    background-repeat:no-repeat;
    right:20px;
    float:right;
}

chat.js

Vue.component('chatinput',{
    template:'#chatinput',
    props:{//left:0,right:1
        dialogueArray:Array
    },
    data:function(){
        return{
            cin:""//内容
        }
    },
    computed:{

    },
    methods:{
        addLeft:function(){
            var cin=$(".line-input").val();
            if(cin=="") return;
            var direction = 0;
            this.dialogueArray.push({cin:cin,direction:direction});
            $(".line-input").val("");
            var h = $(document).height()-$(window).height();//滚动到最底
            $(document).scrollTop(h);
        },
        addRight:function(){
            var cin=$(".line-input").val();
            if(cin=="") return;
            var direction = 1;
            this.dialogueArray.push({cin:cin,direction:direction});
            var h = $(document).height()-$(window).height();
            $(document).scrollTop(h);
            $(".line-input").val("");
        }
    }
})
new Vue({
    el: '#app',
    data: {
        dialogueArray: [{
            cin: "lalala:left",
            direction: 0
        }, {
            cin: "lala:right",
            direction: 1
        }]
    }
})

前端入门级别技术编写仿微信对话框页面

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读