<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<style>
*{
margin:0;
padding:0;
}
html,body{
width:100%;
height:100%;
}
.bigbox{
padding-bottom:0.3rem;
position: relative;
}
.echarts{
width:5.27rem;
height:3.2rem;
margin:0 auto;
background-image: url(img/echarts.png);
background-size: 100% 100%;
display: flex;
justify-content: space-around;
position: relative;
padding:0.05rem 0.5rem;
box-sizing: border-box;
}
.echarts>span{
position: absolute;
left:-0.3rem;
font-size: 0.2rem;
color:#666;
font-weight: 600;
}
.echarts>span:first-child{
top:0.2rem
}
.echarts>span:nth-child(2){
top:0.42rem
}
.echarts>.bar{
width:1rem;
height:100%;
position: relative;
/* bottom:0; */
}
.echarts>.bar>div{
position: absolute;
bottom:0;
/* height:2rem; */
width:100%;
padding-top:0.3rem;
box-sizing: border-box;
text-align: center;
/* background-color: salmon; */
border-radius: 0.2rem 0.2rem 0px 0px;
font-size: 0.2rem;
color:#fff;
font-weight: 600;
}
.echarts>.bar>div>span{
position: absolute;
bottom:-0.3rem;
left:50%;
transform: translateX(-50%);
font-size: 0.2rem;
color:#666;
display: block;
width:100%
}
.bar1>div{
background-color: #4281FF;
}
.bar2>div{
background-color: #73A1FF;
}
</style>
<body>
<div id="app">
<div class="bigbox">
<div class="echarts">
<span>数</span>
<span>值</span>
<div class="bar bar1" >
<div :style="my_bar">
{{myS}}
<span>您的得分</span>
</div>
</div>
<div class="bar bar2">
<div :style="lv_bar">
125
<span>平均得分</span>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if (clientWidth >= 750) {
docEl.style.fontSize = '100px';
} else {
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
my_bar:'',
lv_bar:'',
maxS:174,//最高分数
lvS:125,//平均分数
myS:0//我的分数
},
methods:{
setheight(mys){
this.myS = mys
this.my_bar = 'height:'+ parseInt(mys/this.maxS*100)+'%'
this.lv_bar = 'height:'+parseInt(125/this.maxS*100)+'%'
console.log(this.my_bar)
}
},
mounted() {
this.setheight(80)
},
})
</script>
</html>
bar.rar
- mwhk了解作者
- JavaScript开发工具
- 13KB文件大小
- rar文件格式
- 0收藏次数
- 1 积分下载积分
- 0下载次数
- 2020-06-02 15:42上传日期
CA认证，即电子认证服务 [1] ，是指为电子签名相关各方提供真实性、可靠性验证的活动。
证书颁发机构（CA, Certificate Authority）即颁发数字证书的机构。是负责发放和管理数字证书的权威机构，并作为电子商务交易中受信任的第三方，承担公钥体系中公钥的合法性检验的责任。
bar.rar
bar- img
- echarts.png2.5KB
- index.html3.9KB
- a.js89B
- topEsa.min.js44.2KB
内容介绍
评论
相关推荐
- CA.rarCA服务器基于2003环境的建站策略,这是一个建立ca的文档！希望对大家有帮助。
- CA.zipjava资料，设置CA双向认证，ssh的设置
- CA系统的开发.zipCA系统的开发手册，为开发者提供的设计思路
- ca.rarCA 认证。在linux上引用库即可执行，对给定的请求，访问本地文件（自己vi个），取到相应的文件名然后返回文件。
- CA证书认证CA证书 RSA KEYTOOL ANDROID
- 网络安全实验报告 CA认证及其应用这是一个有关计算机专业的同学学习计算机网络安全时，根据老师布置的实验所做的实验报告
- Windows server 2003 CA服务配置CA:Certificate Authority,证书权威机构,也称为证书颁发机构或认证中心)是PKI中受信任的第三方实体.负责证书颁发、吊销、更新和续订等证书管理任务和CRL发布和事件日志记录等几项重要的任务。首先，主体发出证书申请...
- weblogic的SSL配置 CA认证.rar附件test.jks是服务器证书keystore，cacerts是客户端认证文件，请参考配置指南的 “7 weblogic的SSL配置”后内容，参数配置如下，路径可以随便更改
- CA认证系统简单的CA认证系统 C++代码 送给需要的朋友
- crypto-ca.rar网络通信中的Ca认证部门，对CA认证的机制及网络通信有指导价值