低仿朋友圈实时时间变换(一)

最新推荐文章于 2022-06-15 11:27:40 发布

YaoJunLuo

最新推荐文章于 2022-06-15 11:27:40 发布

阅读量597

点赞数 1

本文链接：https://blog.csdn.net/YaoJunLuo/article/details/82718672

版权

这里写图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>朋友圈实时时间转换</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="app">
        <p align="center">{{thisTime}}</p>

        <template v-for="list in lists">
            <time-list :list='list'></time-list>
        </template>
    </div>
    <script type="text/x-template" id="time-list">

        <div class="list">
            <div class="left">
                <a href="#" class="avatar_a"><img :src="list.avatar" class="avatar"></a>
            </div>
            <div class="right">
                <div class="top">
                    <a href="#" class="user_n"><span>{{list.names}}</span></a>
                </div>
                <div class="main">
                    <p>{{list.content}}</p>
                    <img :src="list.url">
                </div>
                <div class="times">刚刚</div>
            </div>
            <div class="clear"></div>
        </div>
    </script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-3.2.1.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
</body>
</html>

app.js

var time = new Date();
time = time.toString();

Vue.component('time-list',{
    props: ['list'],
    template: '#time-list'
})

var app = new Vue({
    el: '#app',
    data: {
        lists: [{
            avatar: 'src/tou.jpg',
            names: '未来机械城',
            content: '简介:《未来机器城》是由阿里巴巴影业集团、万达影视传媒有限公司出品的动画电影，由安恪温、龙子乔执导。该片被Netflix以3000万美元买下海外发行权。',
            url: 'src/weilai.jpg'
        },
        {
            avatar: 'src/tou.jpg',
            names: '未来机械城',
            content: '简介:《未来机器城》是由阿里巴巴影业集团、万达影视传媒有限公司出品的动画电影，由安恪温、龙子乔执导。该片被Netflix以3000万美元买下海外发行权。',
            url: 'src/weilai.jpg'
        }]      
    },
    computed: {
        thisTime: function () {
            return (time);
        }
    }
})

style.css

*{
    margin: 0;
    padding: 0;
}
body{
    background-color: #eee;
}
#app{

}
.list{
    margin: 10px auto;
    width: 430px;
    min-height: 250px;
    background-color: #fff;
    border-radius: 5px;
}
.left{
    float: left;
    width: 80px;
    height: 250px;
}
.avatar_a{
    display: inline-block;
    width: 50px;
    height: 50px;
    margin: 15px;
}
.avatar{
    border-radius: 50%;
    width: 50px;
    height: 50px;
}
.right{
    float: right;
    width: 340px;
    height: auto;
    margin-right: 10px;
}
.user_n{
    display: block;
    height: 30px;
    line-height: 40px;
    font-size: 14px;
    text-decoration: none;
    color: #000080;
    font-weight: bold;
    font-family: "微软雅黑";
    margin: 5px 10px;
    word-spacing: 14px;
}
.main{
    width: 320px;
    height: auto;
}
.main{
    font-size: 12px;
    padding: 0 10px;
    font-weight: bold;
    font-family: "Heiti SC Light","微软雅黑";
}
.main img{
    width: 250px;
    height: auto;
    margin: 10px;
    margin-bottom: 0;
    margin-left: 0px;
}
.times{
    margin-left: 10px;
    font-size: 8px; 
    color: #C0C0C0;

}
.clear{
    clear: both;
}