|
|
@@ -0,0 +1,131 @@
|
|
|
+<!--
|
|
|
+ * @Descripttion: 中间的图案
|
|
|
+ * @Author: sujunling
|
|
|
+ * @Date: 2025-05-19 09:10:25
|
|
|
+-->
|
|
|
+<template>
|
|
|
+ <div class="center">
|
|
|
+ <ul class="centerUl">
|
|
|
+ <li>
|
|
|
+ <span><i>59</i><b>分</b></span>
|
|
|
+ <p>信息</p>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span><i>78</i><b>分</b></span>
|
|
|
+ <p>资源</p>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span><i>34</i><b>分</b></span>
|
|
|
+ <p>目标</p>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span><i>56</i><b>分</b></span>
|
|
|
+ <p>利益</p>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <p class="lh">良好</p>
|
|
|
+ <p>总体协调情况</p>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: 'Center',
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ return {}
|
|
|
+ },
|
|
|
+ mounted() {},
|
|
|
+
|
|
|
+ methods: {}
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.center > p:last-child {
|
|
|
+ font-weight: bold;
|
|
|
+ margin-top: 10px;
|
|
|
+ font-size: 30px;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 40px;
|
|
|
+ text-align: center;
|
|
|
+ text-shadow: 0px 0px 9px #042d45;
|
|
|
+}
|
|
|
+.center > p.lh {
|
|
|
+ margin-top: 80px;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 48px;
|
|
|
+ color: #ffffff;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 40px;
|
|
|
+ text-shadow: 0px 0px 9px #042d45;
|
|
|
+ background: linear-gradient(0deg, #ffeaa1 0.87890625%, #ffffff 100%);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+}
|
|
|
+.centerUl li:first-child {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+}
|
|
|
+.centerUl li:nth-child(2) {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+}
|
|
|
+.centerUl li:nth-child(3) {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+}
|
|
|
+.centerUl li:nth-child(4) {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+}
|
|
|
+.centerUl p {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 33px;
|
|
|
+ background: linear-gradient(180deg, #ffffff 0%, #84c1ff 100%);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ margin-top: 30px;
|
|
|
+}
|
|
|
+.centerUl li b {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 36px;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 40px;
|
|
|
+ background: linear-gradient(180deg, #a2d7ff 0%, #ffffff 47.75390625%, #63fdff 100%);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+}
|
|
|
+.centerUl li i {
|
|
|
+ font-weight: 500;
|
|
|
+ margin-left: 10px;
|
|
|
+ font-size: 48px;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 40px;
|
|
|
+ background: linear-gradient(180deg, #a2d7ff 0%, #ffffff 47.75390625%, #63fdff 100%);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+}
|
|
|
+.centerUl li {
|
|
|
+ width: 147px;
|
|
|
+ text-align: center;
|
|
|
+ height: 96px;
|
|
|
+ background: url('~@/assets/images/jczc/xtpj_bg3.png') no-repeat center center;
|
|
|
+ background-size: 147px 87px;
|
|
|
+}
|
|
|
+.center {
|
|
|
+ position: fixed;
|
|
|
+ top: 130px;
|
|
|
+ left: 28%;
|
|
|
+ width: 45%;
|
|
|
+ height: 48%;
|
|
|
+ background: url('~@/assets/images/jczc/xtpj_bg2.png') no-repeat center center;
|
|
|
+ background-size: 75% 100%;
|
|
|
+}
|
|
|
+</style>
|