一、从网上找一个喜欢的图
1.首先大屏要先解决屏幕适配的问题
这里用viewport的方案，使用postcss-px-to-viewport插件，在vue项目里新建postcss.config.js配置一下postcss-px-to-viewport：
module.exports = { plugins: { // ... 'postcss-px-to-viewport': { viewportWidth: 1920, unitPrecision: 1, } } }
2.大屏设计
咱自己设计的太丑，所以我从站酷上找了一个看起来还不错的设计图，然后照着图写页面。
怎么样？这个页面的效果还挺好的吧？大家觉得怎么样啊。下面我们完成这个页面。
二、分析一下页面，看看哪些适合做成公用组件
很明显是他，他还有两个变形：
所以，先把这个组件实现一下。
三、实现第一个组件：
- 整个面板是透明渐变
- 左上角是一个渐变三角形，或者整个左边是个矩形，或者没有
- 统一的标题
其他的好说，就是这个三角形渐变繁琐点
1. 如果用div的border实现三角形，可以实现，但是怎么实现渐变色呢？
2. 用canvas画三角形，可行，但是想实现布局响应式，适配不同分辩是不是麻烦点？“postcss-px-to-viewport”会对内联css样式，外联css样式有效，对内嵌css样式，js动态css无效，canvas画东西都是在js里面操作。做适配是不是会很麻烦？
initPanel(){ //三角形 let ctx = this.$refs.sanjiaoxing.getContext("2d"); //设置渐变色 let grd =ctx.createLinearGradient(0,0,0,100); grd.addColorStop(0,"#51acf7"); grd.addColorStop(1,"#5adce1"); ctx.fillStyle=grd; ctx.lineWidth=0; ctx.beginPath(); ctx.strokeStyle=""; ctx.moveTo(0,0); ctx.lineTo(0,100); ctx.lineTo(120,0); ctx.closePath(); ctx.stroke(); ctx.fill(); //图片 let img = new Image(60,45); img.src = require("@/views/activity/assets/书包_#ffffff_128_20117032.png") img.onload = function () { ctx.drawImage(img,5,5,60,45); } }
先用canvas写一下这个组件。屏幕尺寸改变了，canvas要根据新的尺寸重新渲染，来实现屏幕适配。
3. 用svg实现三角形，svg本身矢量图可以缩放。
看来最好是用svg
<div class="hezi"> <div class="background"></div> <svg class="svg-2" viewBox="0, 0, 100, 100"> <defs> <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"/> <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"/> </linearGradient> </defs> <path d="M 0 0 l 90 0 l -90 90" fill="url(#grad1)"></path> </svg> <img class="hezi-icon" src="@/views/环动.svg"> </div>
用svg把三角形画出来，从www.iconfont.cn下载个svg的图，然后看下效果，完美！
