<template> <div> <!-- 1:文字，2：红包，3：文章 ,css:类型 --> <div v-if="data.type == 1&&data.css == 'left'"> <div>{{data.date}}</div> <div> <img :src="data.headImg"> <div> {{data.txt}} </div> </div> </div> <router-link to="/homeRedBag" v-else-if="data.type == 2&&data.css == 'left'"> <div>{{data.date}}</div> <div> <img :src="data.headImg"> <div> <div> <img src="https://www.jb51.net/assets/images/redTabs.png"/> <span>{{data.title}}</span> </div> <div>{{data.txt}}</div> </div> </div> </router-link> <router-link to="/homeArticle" v-else-if="data.type == 3&&data.css == 'left'"> <div>{{data.date}}</div> <div> <img :src="data.headImg"> <div> <div>{{data.title}}</div> <div> <div>{{data.txt}}</div> <img :src="data.banner"/> </div> </div> </div> </router-link> <div v-if="data.type == 1&&data.css == 'right'"> <div>{{data.date}}</div> <div> <div> {{data.txt}} </div> <img :src="data.headImg"> </div> </div> </div> </template> <script> import Vue from "vue"; import router from "../router.js"; export default { name: "homeNews", props:['data'], data() { return { }; }, created() { console.log() }, methods: { } }; </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> .head { width: 0.36rem; height: 0.36rem; } .frame::before { display: block; content: ''; width: 0px; /* 宽高设置为0，很重要，否则达不到效果 */ height: 0px; border: .10rem solid #fff; border-bottom-color: transparent; /* 设置透明背景色 */ border-top-color: transparent; border-left-color: transparent; position: absolute;left:-.2rem;top:.1rem; } .frame-right::before{ display: block; content: ''; width: 0px; /* 宽高设置为0，很重要，否则达不到效果 */ height: 0px; border: .10rem solid #fff; border-bottom-color: transparent; /* 设置透明背景色 */ border-top-color: transparent; border-right-color: transparent; position: absolute;right:-.2rem;top:.1rem; } .redFrame::before{ display: block; content: ''; width: 0px; /* 宽高设置为0，很重要，否则达不到效果 */ height: 0px; border: .10rem solid #F99F3E; border-bottom-color: transparent; /* 设置透明背景色 */ border-top-color: transparent; border-left-color: transparent; position: absolute;left:-.2rem;top:.1rem; } .redFrame-right::before{ display: block; content: ''; width: 0px; /* 宽高设置为0，很重要，否则达不到效果 */ height: 0px; border: .10rem solid #F99F3E; border-bottom-color: transparent; /* 设置透明背景色 */ border-top-color: transparent; border-left-color: transparent; position: absolute;right:-.2rem;top:.1rem; } .w250{max-width: 2.5rem;} .w200{max-width: 2rem;} .redTabs{ width: .32rem; height:.39rem; } .txt{ border-bottom-left-radius: .05rem; border-bottom-right-radius: .05rem; } .banner{width: .4rem;height: .4rem;} </style> style.css 我自己的样式表 @charset "utf-8"; /* CSS Document 刘白超修改于2019/3/10*/ html,body{height: 100%;width: 100%;word-wrap:break-word;} *{margin: 0;padding: 0;} .tc{text-align: center} .tr{text-align: right} .tl{text-align: left} .vm{vertical-align: middle;} .vs{vertical-align: sub;} .fl{float: left;} .fr{float: right;} .fz24{font-size: .24rem;} .fz20{font-size: .2rem;} .fz18{font-size: .18rem;} .fz16{font-size: .16rem;} .fz14{font-size: .14rem;} .fz12{font-size: .12rem;} .fw{font-weight: 600;} .mr5{margin-right: .05rem} .mr10{margin-right: .10rem} .mr15{margin-right: .15rem} .mr20{margin-right: .20rem} .ml5{margin-left:.05rem;} .ml10{margin-left:.10rem;} .ml15{margin-left:.15rem;} .ml20{margin-left:.20rem;} .ml24{margin-left:.24rem;} .mt40{margin-top:.40rem;} .mt20{margin-top: .20rem;} .mt15{margin-top: .15rem;} .mt10{margin-top: .10rem;} .mt5{margin-top: .05rem;} .mb5{margin-bottom: .05rem;} .mb10{margin-bottom: .10rem;} .mb15{margin-bottom: .15rem;} .mb20{margin-bottom: .20rem;} .pt5{padding-top: .05rem;} .pt10{padding-top: .10rem;} .pt15{padding-top: .15rem;} .pt20{padding-top: .20rem;} .pt30{padding-top: .30rem;} .pb5{padding-bottom: .05rem;} .pb10{padding-bottom: .10rem;} .pb15{padding-bottom: .15rem;} .pb20{padding-bottom: .20rem;} .pl5{padding-left: .05rem;} .pl10{padding-left: .10rem;} .pl15{padding-left: .15rem;} .pl20{padding-left: .20rem;} .pl30{padding-left: .30rem;} .pr5{padding-right: .05rem;} .pr10{padding-right: .10rem;} .pr15{padding-right: .15rem;} .pr20{padding-right: .20rem;} .pr30{padding-right: .30rem;} .bgef{background: #EFEFEF;} .bgf{background: #fff;} .bgf9{background: #F99F3E} .ee {background: #eee;} .bg259{background:#259DFF !important} .colordd{color: #DD4D41} .colorf9 {color: #ff9800;} .colore5{color: #e51c23;} .colorF{color: #fff;} .color3{color: #333;} .color6{color: #666;} .color9{color: #999;} .colora1{color:#a1a1a1} .color259{color:#259DFF} .color005{color:#00559B} .colorf3{color:#F3665E} .lh24{line-height: .24rem} .lh20{line-height: .20rem;} .lh30{line-height: .30rem;} .lh40{line-height: .40rem;} .lh50{line-height: .50rem;} .lh60{line-height: .60rem;} .hide{display: none} .show{display: block} .inline{display: inline-block;} .indent2{text-indent: 2em;} .txt2{ overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .wn{white-space:nowrap;} .flex{display: flex;} .flex1{flex:1;} .colu{flex-direction: column;} .justc{justify-content: center;} .justs{justify-content: space-between}/*两端对齐*/ .justsa{justify-content: space-around}/*分散对齐*/ .juste{justify-content: flex-end;} .alic{align-items: center} .wrap{flex-wrap:wrap} .childEnd{align-self:flex-end;} .posAbs{position: absolute;} .posRel{position: relative;} .posFix{position: fixed;} .top0{top:0;} .bottom0{bottom:0;} .left0{left:0;} .right0{right: 0;} .w100{width: 100%} .h100{height: 100%} .borBox{box-sizing: border-box;} .borderte0{border-top:1px solid #e0e0e0; } .borderbe0{border-bottom:1px solid #e0e0e0; } .borRad{border-radius:.05rem;} .over{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;} .overH{overflow: hidden} .clear{zoom:1;} .clear:after{content: "\0020";display: block;height: 0;clear: both;} .mask{width: 100%;height: 100%;background: rgba(20, 20, 20, 0.5);position: fixed;z-index: 5;top: 0;left: 0;} .cursor{cursor: pointer;} .noClick{pointer-events: none;} li{list-style:none;} a{text-decoration:none;color:#555;} a:hover{color:#555;} img{display:block;vertical-align:middle;} a img,fieldset{border:0;} i,em{font-style:normal} b,strong,th{font-weight:100;} input,textarea,select{outline:none;} textarea{resize:none;} table{border-collapse:collapse;} .btn{ width: calc(100% - .54rem); background: #259DFF; font: .2rem/.5rem ""; text-align: center; color: #fff; border-radius: 5px; margin-left: .27rem; } rem.js rem自适应单位 //例如设计稿为375，最大宽度为750，则为(375,750) !function(e,t){function n(){var n=l.getBoundingClientRect().width;t=t||540,n>t&&(n=t);var i=100*n/e;r.innerHTML="html{font-size:"+i+"px;}"}var i,d=document,o=window,l=d.documentElement,r=document.createElement("style");if(l.firstElementChild)l.firstElementChild.appendChild(r);else{var a=d.createElement("div");a.appendChild(r),d.write(a.innerHTML),a=null}n(),o.addEventListener("resize",function(){clearTimeout(i),i=setTimeout(n,300)},!1),o.addEventListener("pageshow",function(e){e.persisted&&(clearTimeout(i),i=setTimeout(n,300))},!1),"complete"===d.readyState?d.body.style.fontSize="16px":d.addEventListener("DOMContentLoaded",function(e){d.body.style.fontSize="16px"},!1)}(375,640);
完了，okk，文中所需icon，请自行到阿里icon下载
结尾：项目中需要配置rem。
总结