Commit ef2885b1 by ChenXiHi
parents 94c406d3 536318f0
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="876" height="408" viewBox="0 0 876 408"><g><g style="opacity:0.4000000059604645;"><path d="M0,0L9.10672,0L6.07115,3.03557L3.03557,3.03557L3.03557,6.07115L0,9.10672L0,0Z" fill-rule="evenodd" fill="#FFFFFF" fill-opacity="1"/></g><g transform="matrix(-1,0,0,1,1752,0)" style="opacity:0.4000000059604645;"><path d="M876,0L885.10672,0L882.07115,3.03557L879.03557,3.03557L879.03557,6.07115L876,9.10672L876,0Z" fill-rule="evenodd" fill="#FFFFFF" fill-opacity="1"/></g><g transform="matrix(1,0,0,-1,0,816)" style="opacity:0.4000000059604645;"><path d="M0,408L9.10672,408L6.07115,411.03557L3.03557,411.03557L3.03557,414.07115L0,417.10672L0,408Z" fill-rule="evenodd" fill="#FFFFFF" fill-opacity="1"/></g><g transform="matrix(-1,0,0,-1,1752,816)" style="opacity:0.4000000059604645;"><path d="M876,408L885.10672,408L882.07115,411.03557L879.03557,411.03557L879.03557,414.07115L876,417.10672L876,408Z" fill-rule="evenodd" fill="#FFFFFF" fill-opacity="1"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="9" height="9" viewBox="0 0 9 9"><g transform="matrix(-1,0,0,1,18,0)" style="opacity:0.4000000059604645;"><path d="M9,0L18,0L14.96443,3.03557L12.03557,3.03557L12.03557,5.96443L9,9L9,0Z" fill-rule="evenodd" fill="#FFFFFF" fill-opacity="1"/></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="9" height="9" viewBox="0 0 9 9"><g transform="matrix(-1,0,0,-1,18,18)" style="opacity:0.4000000059604645;"><path d="M9,9L18,9L14.96443,12.03557L12.03557,12.03557L12.03557,14.96443L9,18L9,9Z" fill-rule="evenodd" fill="#FFFFFF" fill-opacity="1"/></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="9" height="9" viewBox="0 0 9 9"><g style="opacity:0.4000000059604645;"><path d="M0,0L9,0L5.96443,3.03557L3.03557,3.03557L3.03557,5.96443L0,9L0,0Z" fill-rule="evenodd" fill="#FFFFFF" fill-opacity="1"/></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="9" height="9" viewBox="0 0 9 9"><g transform="matrix(1,0,0,-1,0,18)" style="opacity:0.4000000059604645;"><path d="M0,9L9,9L5.96443,12.03557L3.03557,12.03557L3.03557,14.96443L0,18L0,9Z" fill-rule="evenodd" fill="#FFFFFF" fill-opacity="1"/></g></svg>
\ No newline at end of file
...@@ -315,7 +315,6 @@ body { ...@@ -315,7 +315,6 @@ body {
width: 102px; width: 102px;
height: 102px; height: 102px;
margin: 12px 10px 14px 19px; margin: 12px 10px 14px 19px;
padding: 14px 14px; padding: 14px 14px;
box-sizing: border-box; box-sizing: border-box;
background: url("./assets/chart-bg.png") no-repeat; background: url("./assets/chart-bg.png") no-repeat;
...@@ -405,7 +404,7 @@ clip的用法参考:http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -405,7 +404,7 @@ clip的用法参考:http://www.w3school.com.cn/cssref/pr_pos_clip.asp
width: 76px; width: 76px;
height: 76px; height: 76px;
position: relative; position: relative;
background: #f3be28; background: #f3be28 !important;
} }
/*所有的后代都水平垂直居中,这样就是同心圆了*/ /*所有的后代都水平垂直居中,这样就是同心圆了*/
...@@ -468,10 +467,11 @@ clip的用法参考:http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -468,10 +467,11 @@ clip的用法参考:http://www.w3school.com.cn/cssref/pr_pos_clip.asp
} }
.percent { .percent {
font-family: DIN Alternate-Bold; font-family: DIN Alternate-Bold;
font-size: 20px !important;
} }
.percent-text { .percent-text {
color: #fff; color: #fff;
font-size: 18px; font-size: 16px;
margin-top: 30px; margin-top: 30px;
opacity: 0.7; opacity: 0.7;
...@@ -692,7 +692,7 @@ clip的用法参考:http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -692,7 +692,7 @@ clip的用法参考:http://www.w3school.com.cn/cssref/pr_pos_clip.asp
} }
.g-progress { .g-progress {
margin: auto; margin: auto;
width: 167px; width: 145px;
height: 9px; height: 9px;
border-radius: 25px; border-radius: 25px;
...@@ -708,7 +708,7 @@ clip的用法参考:http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -708,7 +708,7 @@ clip的用法参考:http://www.w3school.com.cn/cssref/pr_pos_clip.asp
} }
.assign-progress { .assign-progress {
margin: auto; margin: auto;
width: 166px; width: 145px;
height: 9px; height: 9px;
border-radius: 25px; border-radius: 25px;
......
...@@ -188,7 +188,7 @@ ...@@ -188,7 +188,7 @@
<div class="circle-bar-right-2"></div> <div class="circle-bar-right-2"></div>
<!-- 遮罩层,显示百分比 --> <!-- 遮罩层,显示百分比 -->
<div class="second-mask"> <div class="second-mask">
<span class="percent">10%</span> <span class="percent">100%</span>
<span class="percent-text">完成率</span> <span class="percent-text">完成率</span>
</div> </div>
</div> </div>
...@@ -220,7 +220,7 @@ ...@@ -220,7 +220,7 @@
<div class="circle-bar-right-3"></div> <div class="circle-bar-right-3"></div>
<!-- 遮罩层,显示百分比 --> <!-- 遮罩层,显示百分比 -->
<div class="third-mask"> <div class="third-mask">
<span class="percent">30%</span> <span class="percent">100%</span>
<span class="percent-text">完成率</span> <span class="percent-text">完成率</span>
</div> </div>
</div> </div>
...@@ -475,7 +475,7 @@ ...@@ -475,7 +475,7 @@
} }
var percent3 = parseInt($(".third-mask :first-child").text()); var percent3 = parseInt($(".third-mask :first-child").text());
var baseColor = $(".circle-bar").css("background"); var baseColor = $(".circle-bar-3").css("background");
console.log("percent3==", percent3); console.log("percent3==", percent3);
if (percent3 <= 50) { if (percent3 <= 50) {
$(".circle-bar-right-3").css( $(".circle-bar-right-3").css(
......
...@@ -485,7 +485,7 @@ ...@@ -485,7 +485,7 @@
} }
var percent3 = parseInt($(".third-mask :first-child").text()); var percent3 = parseInt($(".third-mask :first-child").text());
var baseColor = $(".circle-bar").css("background"); var baseColor = $(".circle-bar-3").css("background");
console.log("percent3==", percent3); console.log("percent3==", percent3);
if (percent3 <= 50) { if (percent3 <= 50) {
$(".circle-bar-right-3").css( $(".circle-bar-right-3").css(
......
<html>
<head>
<style>
body {
width: 100vw;
height: 100vh;
}
.wrapper {
width: 100%;
height: 100vh;
display: flex;
justify-content: space-between;
}
.a {
width: 460px;
height: 100px;
background: red;
}
.b {
width: 1000px;
height: 100px;
background: green;
}
.c {
width: 460px;
height: 100px;
background: blue;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="a">
<div>
22222222点击咖啡店了解到了考虑到封疆大吏房间里的克劳福德劳动纪律
</div>
</div>
<div class="b">b</div>
<div class="c">
<div>
22222222点击咖啡店了解到了考虑到封疆大吏房间里的克劳福德劳动纪律
</div>
</div>
</div>
</body>
</html>
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论