|
|
@@ -1,19 +1,95 @@
|
|
|
<template>
|
|
|
<!-- <Particle /> -->
|
|
|
- <div class="bg"></div>
|
|
|
+ <div class="bg">
|
|
|
+ <div id="unity-container" class="unity-desktop">
|
|
|
+ <canvas id="unity-canvas" tabindex="-1"></canvas>
|
|
|
+ <div id="unity-loading-bar">
|
|
|
+ <div id="unity-logo"></div>
|
|
|
+ <div id="unity-progress-bar-empty">
|
|
|
+ <div id="unity-progress-bar-full"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div id="unity-warning"> </div>
|
|
|
+ <div id="unity-footer">
|
|
|
+ <!-- <div id="unity-webgl-logo"></div>
|
|
|
+ <div id="unity-fullscreen-button"></div>
|
|
|
+ <div id="unity-build-title">2Building</div> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
<div class="visual">
|
|
|
<div class="visual_left">
|
|
|
<div class="visual_box">
|
|
|
<div class="visual_title">
|
|
|
- <span>实验室介绍{{ dogName }}</span>
|
|
|
+ <span>工程实验中心{{ dogName }}</span>
|
|
|
<img src="/@/assets/header/xiaotitle.png">
|
|
|
</div>
|
|
|
<div class="visual_chart" id="main1">
|
|
|
- <span class="jieshao">
|
|
|
- <img style="margin: 6px;width: 46%;" v-for="(image, index) in imagesa" :key="index" :src="image"
|
|
|
- alt="Lab Image">
|
|
|
- <div v-html="ltydata.labinfo[0].laboratory_introduction"></div>
|
|
|
- </span>
|
|
|
+ <span class="jieshao">
|
|
|
+ <!-- <img style="margin: 6px;width: 46%;" v-for="(image, index) in imagesa" :key="index" :src="image"
|
|
|
+ alt="Lab Image"> -->
|
|
|
+ <!-- <div v-html="ltydata.labinfo[0].laboratory_introduction"></div> -->
|
|
|
+ <div style="pointer-events: none;">
|
|
|
+ <div class="jieshao-top">
|
|
|
+ <div class="js-left">
|
|
|
+ <img src="/@/assets/jj.png" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="js-right">
|
|
|
+ <div><span class="js-span">面积<span class="js-color">2590</span>平方米</span></div>
|
|
|
+ <div><span class="js-span">实验室<span class="js-color">23</span>间</span></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="jieshao-bottom">
|
|
|
+ <div class="js-flex">
|
|
|
+ <div class="js-tb"><img src="/@/assets/sxt.png" alt="" style="width: 1.5vw;margin-left: 1.1vw;margin-top: .75vw;"></div>
|
|
|
+ <div class="js-top">
|
|
|
+
|
|
|
+ <div>摄像头</div>
|
|
|
+ <div class="js-bottom">
|
|
|
+ 25
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="js-flex">
|
|
|
+ <div class="js-tb"><img src="/@/assets/xf.png" alt="" style="width: 1.4vw;margin-left: 1.1vw;margin-top: .75vw;"></div>
|
|
|
+ <div class="js-top">
|
|
|
+
|
|
|
+ <div>消防设施</div>
|
|
|
+ <div class="js-bottom">
|
|
|
+ 10
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="js-flex">
|
|
|
+ <div class="js-tb"><img src="/@/assets/yg.png" alt="" style="width: 1.5vw;margin-left: 1vw;margin-top: .75vw;"></div>
|
|
|
+ <div class="js-top">
|
|
|
+
|
|
|
+ <div>烟感</div>
|
|
|
+ <div class="js-bottom">
|
|
|
+ 23
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div></div>
|
|
|
+ <div></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="visual_box visualSfzsfl">
|
|
|
+ <div class="visual_title">
|
|
|
+ <span>仪器借用统计（近6月）{{ dogName }}</span>
|
|
|
+ <img src="/@/assets/header/xiaotitle.png">
|
|
|
+ </div>
|
|
|
+ <div class="visual_table">
|
|
|
+ <div :style="{ width: '100%', height: '100%' }">
|
|
|
+ <LendEcharts :option="option" />
|
|
|
+ </div>
|
|
|
+
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
@@ -33,17 +109,18 @@
|
|
|
<div>
|
|
|
<h3>仪器总数(台)</h3>
|
|
|
<p>{{ ltydata.count }}</p>
|
|
|
+
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="visual_conTop_box visual_conTop2">
|
|
|
<div>
|
|
|
<h3>仪器借出（台）</h3>
|
|
|
<!-- <p>{{ ltydata.lent_number }}</p> -->
|
|
|
- <p>165</p>
|
|
|
+ <p>30</p>
|
|
|
<div class="conTop_smil">
|
|
|
<!-- fa-long-arrow-up -->
|
|
|
- <a class="sz">周环比:<span>-5%</span><i class="fa fa-long-arrow-down"></i></a>
|
|
|
- <a class="xd">月环比:<span>-2%</span><i class="fa fa-long-arrow-down"></i></a>
|
|
|
+ <a class="sz">周环比:<span>-1%</span><i class="fa fa-long-arrow-down"></i></a>
|
|
|
+ <a class="xd">月环比:<span>-1%</span><i class="fa fa-long-arrow-down"></i></a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -57,12 +134,9 @@
|
|
|
</div>
|
|
|
<div class="visual_conTop_box visual_conTop2">
|
|
|
<div>
|
|
|
- <h3>仪器损坏（台）</h3>
|
|
|
- <p>{{ ltydata.repair_number }}</p>
|
|
|
- <div class="conTop_smil">
|
|
|
- <a class="null">null</a>
|
|
|
- <a class="xd">月环比:<span>-10%%</span><i class="fa fa-long-arrow-down"></i></a>
|
|
|
- </div>
|
|
|
+ <h3>上月仪器损坏数（台）</h3>
|
|
|
+ <!-- <p>{{ ltydata.repair_number }}</p> -->
|
|
|
+ <p>{{ 0 }}</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
@@ -78,7 +152,7 @@
|
|
|
</div>
|
|
|
<div class="visual_table">
|
|
|
<div :style="{ width: '100%', height: '100%' }">
|
|
|
- <Echarts :option="option"/>
|
|
|
+ <Echarts :option="option" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -86,21 +160,27 @@
|
|
|
|
|
|
</div>
|
|
|
|
|
|
+
|
|
|
+
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts" name="Home">
|
|
|
-import {onMounted, reactive, computed, ref, onUnmounted} from 'vue';
|
|
|
-import {useRouter} from 'vue-router'
|
|
|
+import { onMounted, reactive, computed, ref, onUnmounted } from 'vue';
|
|
|
+import { useRouter } from 'vue-router'
|
|
|
import useDog from '/@/api/frontend/home/index'
|
|
|
-import {ElLoading} from 'element-plus'
|
|
|
+import { ElLoading } from 'element-plus'
|
|
|
// Echarts
|
|
|
import Echarts from '/@/components/ReEcharts/index.vue';
|
|
|
+import LendEcharts from '/@/components/ReEcharts/lend.vue';
|
|
|
+
|
|
|
import createAxios from '/@/utils/axios'
|
|
|
+import "/@/Build/B.loader.js"
|
|
|
+import "/@/Build/B.framework.js"
|
|
|
|
|
|
const router = useRouter()
|
|
|
|
|
|
// import Particle from '/@/layouts/frontend/components/particle.vue'
|
|
|
-const {dogList, dogName, getDog} = useDog()
|
|
|
+const { dogList, dogName, getDog } = useDog()
|
|
|
const ltydata = reactive({
|
|
|
labinfo: [{
|
|
|
laboratory_introduction: '',
|
|
|
@@ -115,14 +195,14 @@ const ltydata = reactive({
|
|
|
"RTK": 258,
|
|
|
"全站仪": 546,
|
|
|
"无人机": 23,
|
|
|
- "其他": 435
|
|
|
+ "配件及其他": 435
|
|
|
},
|
|
|
});
|
|
|
const imagesa = ref(null)
|
|
|
await createAxios({
|
|
|
- url: '/api/ScreenData/getdata',
|
|
|
- method: 'get',
|
|
|
- },
|
|
|
+ url: '/api/ScreenData/getdata',
|
|
|
+ method: 'get',
|
|
|
+},
|
|
|
{
|
|
|
loading: true,
|
|
|
}
|
|
|
@@ -138,9 +218,9 @@ await createAxios({
|
|
|
const timer: any = ref(null);
|
|
|
const checkBackendStatus: any = async () => {
|
|
|
const response = await createAxios({
|
|
|
- url: '/api/ScreenData/getCurrent',
|
|
|
- method: 'get',
|
|
|
- }
|
|
|
+ url: '/api/ScreenData/getCurrent',
|
|
|
+ method: 'get',
|
|
|
+ }
|
|
|
).then(async (val: any) => {
|
|
|
console.log(val.data)
|
|
|
if (val.code == 1) {
|
|
|
@@ -157,6 +237,100 @@ const checkBackendStatus: any = async () => {
|
|
|
onMounted(() => {
|
|
|
// 每5秒轮询一次
|
|
|
timer.value = setInterval(checkBackendStatus, 5000);
|
|
|
+ /* bg模型 */
|
|
|
+
|
|
|
+ var container = document.querySelector("#unity-container");
|
|
|
+ var canvas = document.querySelector("#unity-canvas");
|
|
|
+ var loadingBar = document.querySelector("#unity-loading-bar");
|
|
|
+ var progressBarFull = document.querySelector("#unity-progress-bar-full");
|
|
|
+ var fullscreenButton = document.querySelector("#unity-fullscreen-button");
|
|
|
+ var warningBanner = document.querySelector("#unity-warning");
|
|
|
+
|
|
|
+ // Shows a temporary message banner/ribbon for a few seconds, or
|
|
|
+ // a permanent error message on top of the canvas if type=='error'.
|
|
|
+ // If type=='warning', a yellow highlight color is used.
|
|
|
+ // Modify or remove this function to customize the visually presented
|
|
|
+ // way that non-critical warnings and error messages are presented to the
|
|
|
+ // user.
|
|
|
+ function unityShowBanner(msg, type) {
|
|
|
+ function updateBannerVisibility() {
|
|
|
+ warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
|
|
|
+ }
|
|
|
+ var div = document.createElement('div');
|
|
|
+ div.innerHTML = msg;
|
|
|
+ warningBanner.appendChild(div);
|
|
|
+ if (type == 'error') div.style = 'background: red; padding: 10px;';
|
|
|
+ else {
|
|
|
+ if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
|
|
|
+ setTimeout(function () {
|
|
|
+ warningBanner.removeChild(div);
|
|
|
+ updateBannerVisibility();
|
|
|
+ }, 5000);
|
|
|
+ }
|
|
|
+ updateBannerVisibility();
|
|
|
+ }
|
|
|
+
|
|
|
+ var buildUrl = "./assets";
|
|
|
+ var loaderUrl = buildUrl + "/B.loader.js";
|
|
|
+ var config = {
|
|
|
+ dataUrl: buildUrl + "/B.data",
|
|
|
+ frameworkUrl: buildUrl + "/B.framework.js",
|
|
|
+ codeUrl: buildUrl + "/B.wasm",
|
|
|
+ streamingAssetsUrl: "StreamingAssets",
|
|
|
+ companyName: "DefaultCompany",
|
|
|
+ productName: "2Building",
|
|
|
+ productVersion: "0.1.0",
|
|
|
+ showBanner: unityShowBanner,
|
|
|
+ };
|
|
|
+
|
|
|
+ // By default, Unity keeps WebGL canvas render target size matched with
|
|
|
+ // the DOM size of the canvas element (scaled by window.devicePixelRatio)
|
|
|
+ // Set this to false if you want to decouple this synchronization from
|
|
|
+ // happening inside the engine, and you would instead like to size up
|
|
|
+ // the canvas DOM size and WebGL render target sizes yourself.
|
|
|
+ // config.matchWebGLToCanvasSize = false;
|
|
|
+
|
|
|
+ if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
|
|
|
+ // Mobile device style: fill the whole browser client area with the game canvas:
|
|
|
+
|
|
|
+ var meta = document.createElement('meta');
|
|
|
+ meta.name = 'viewport';
|
|
|
+ meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
|
|
|
+ document.getElementsByTagName('head')[0].appendChild(meta);
|
|
|
+ container.className = "unity-mobile";
|
|
|
+ canvas.className = "unity-mobile";
|
|
|
+
|
|
|
+ // To lower canvas resolution on mobile devices to gain some
|
|
|
+ // performance, uncomment the following line:
|
|
|
+ // config.devicePixelRatio = 1;
|
|
|
+
|
|
|
+
|
|
|
+ } else {
|
|
|
+ // Desktop style: Render the game canvas in a window that can be maximized to fullscreen:
|
|
|
+
|
|
|
+ canvas.style.width = "960px";
|
|
|
+ canvas.style.height = "600px";
|
|
|
+ }
|
|
|
+
|
|
|
+ loadingBar.style.display = "block";
|
|
|
+
|
|
|
+ var script = document.createElement("script");
|
|
|
+ script.src = loaderUrl;
|
|
|
+ script.onload = () => {
|
|
|
+ createUnityInstance(canvas, config, (progress) => {
|
|
|
+ progressBarFull.style.width = 100 * progress + "%";
|
|
|
+ }).then((unityInstance) => {
|
|
|
+ loadingBar.style.display = "none";
|
|
|
+ // fullscreenButton.onclick = () => {
|
|
|
+ // unityInstance.SetFullscreen(1);
|
|
|
+ // };
|
|
|
+ }).catch((message) => {
|
|
|
+ alert(message);
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ document.body.appendChild(script);
|
|
|
+
|
|
|
});
|
|
|
|
|
|
onUnmounted(() => {
|
|
|
@@ -171,7 +345,7 @@ const option = reactive({
|
|
|
// subtext: 'Fake Data',
|
|
|
// left: 'center'
|
|
|
// },
|
|
|
- color: ['#05f8d6', '#0082fc', '#fdd845', '#22ed7c', '#09b0d3', '#1d27c9', '#f9e264'],
|
|
|
+ color: ['#05f8d6', '#0082fc', '#fdd845', '#22ed7c','#09b0d3', '#f9e264', ' #40E0D0', '#4169E1','#1E90FF'],
|
|
|
tooltip: {
|
|
|
trigger: 'item'
|
|
|
},
|
|
|
@@ -189,11 +363,21 @@ const option = reactive({
|
|
|
type: 'pie',
|
|
|
radius: '50%',
|
|
|
data: [
|
|
|
- {value: ltydata['a']['水准仪'], name: '水准仪'},
|
|
|
- {value: ltydata['a']['RTK'], name: 'RTK'},
|
|
|
- {value: ltydata['a']['全站仪'], name: '全站仪'},
|
|
|
- {value: ltydata['a']['无人机'], name: '无人机'},
|
|
|
- {value: ltydata['a']['其他'], name: '其他'},
|
|
|
+ // { value: ltydata['a']['水准仪'], name: '水准仪' },
|
|
|
+ // { value: ltydata['a']['RTK'], name: 'RTK' },
|
|
|
+ // { value: ltydata['a']['全站仪'], name: '全站仪' },
|
|
|
+ // { value: ltydata['a']['无人机'], name: '无人机' },
|
|
|
+ // { value: ltydata['a']['配件及其他'], name: '配件及其他' },
|
|
|
+ { value: 237, name: '水准仪' },
|
|
|
+ { value: 178, name: 'RTK' },
|
|
|
+ { value: 284, name: '全站仪' },
|
|
|
+ { value: 96, name: '无人机' },
|
|
|
+ { value: 309, name: '经纬仪' },
|
|
|
+ { value: 105, name: 'MSS' },
|
|
|
+ { value: 207, name: '遥感工作站' },
|
|
|
+ { value: 52, name: '激光雷达' },
|
|
|
+ { value: 851, name: '配件及其他' },
|
|
|
+
|
|
|
],
|
|
|
emphasis: {
|
|
|
itemStyle: {
|
|
|
@@ -210,6 +394,8 @@ const option = reactive({
|
|
|
]
|
|
|
|
|
|
});
|
|
|
+
|
|
|
+
|
|
|
</script>
|
|
|
|
|
|
|
|
|
@@ -217,12 +403,12 @@ const option = reactive({
|
|
|
.bg {
|
|
|
width: 100vw;
|
|
|
height: 100vh;
|
|
|
- background: url(/@/assets/bg.jpg) repeat;
|
|
|
+ /* background: url(/@/assets/bg.jpg) repeat; */
|
|
|
background-size: 100%;
|
|
|
color: var(--el-color-white);
|
|
|
- z-index: -1;
|
|
|
+ /* z-index: -1; */
|
|
|
position: absolute;
|
|
|
- background-attachment: fixed
|
|
|
+ /* background-attachment: fixed */
|
|
|
}
|
|
|
|
|
|
.jieshao {
|
|
|
@@ -233,7 +419,18 @@ const option = reactive({
|
|
|
|
|
|
.visual {
|
|
|
height: 800px;
|
|
|
+ width: 100vw;
|
|
|
padding-top: 8vw;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 1;
|
|
|
+ pointer-events: none;
|
|
|
+}
|
|
|
+
|
|
|
+.visual .visual_box,
|
|
|
+.visual img,
|
|
|
+.visual div {
|
|
|
+ pointer-events: auto;
|
|
|
+ /* 这些元素将继续响应鼠标事件 */
|
|
|
}
|
|
|
|
|
|
.visual_box {
|
|
|
@@ -352,6 +549,7 @@ const option = reactive({
|
|
|
height: 23px;
|
|
|
margin-right: 5px;
|
|
|
margin-top: -2px;
|
|
|
+
|
|
|
}
|
|
|
|
|
|
.visual_left .sfzcll .sfzcll_box .sfzcll_smallBk {
|
|
|
@@ -361,7 +559,7 @@ const option = reactive({
|
|
|
padding: 2px 5px;
|
|
|
}
|
|
|
|
|
|
-.visual_left .sfzcll .sfzcll_box .sfzcll_smallBk > div {
|
|
|
+.visual_left .sfzcll .sfzcll_box .sfzcll_smallBk>div {
|
|
|
height: 100%;
|
|
|
background: url(../images/ksh38.png) no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
@@ -396,7 +594,7 @@ const option = reactive({
|
|
|
float: left;
|
|
|
}
|
|
|
|
|
|
-.visual_con .visual_conTop .visual_conTop1 > div {
|
|
|
+.visual_con .visual_conTop .visual_conTop1>div {
|
|
|
background: url(../images/ksh40.png) no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
@@ -407,7 +605,7 @@ const option = reactive({
|
|
|
float: left;
|
|
|
}
|
|
|
|
|
|
-.visual_con .visual_conTop .visual_conTop2 > div {
|
|
|
+.visual_con .visual_conTop .visual_conTop2>div {
|
|
|
background: url(../images/ksh39.png) no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
@@ -418,16 +616,16 @@ const option = reactive({
|
|
|
float: right;
|
|
|
}
|
|
|
|
|
|
-.visual_con .visual_conTop .visual_conTop_box > div {
|
|
|
+.visual_con .visual_conTop .visual_conTop_box>div {
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
-.visual_con .visual_conTop .visual_conTop_box > div h3 {
|
|
|
+.visual_con .visual_conTop .visual_conTop_box>div h3 {
|
|
|
color: #fff;
|
|
|
font-size: 1vw;
|
|
|
}
|
|
|
|
|
|
-.visual_con .visual_conTop .visual_conTop_box > div p {
|
|
|
+.visual_con .visual_conTop .visual_conTop_box>div p {
|
|
|
width: 40%;
|
|
|
float: left;
|
|
|
line-height: 4vw;
|
|
|
@@ -437,7 +635,7 @@ const option = reactive({
|
|
|
font-family: 'yjsz';
|
|
|
}
|
|
|
|
|
|
-.visual_con .visual_conTop .visual_conTop_box > div .conTop_smil {
|
|
|
+.visual_con .visual_conTop .visual_conTop_box>div .conTop_smil {
|
|
|
width: 59%;
|
|
|
height: 4vw;
|
|
|
float: left;
|
|
|
@@ -445,26 +643,26 @@ const option = reactive({
|
|
|
font-size: 0.7vw;
|
|
|
}
|
|
|
|
|
|
-.visual_con .visual_conTop .visual_conTop_box > div .conTop_smil a {
|
|
|
+.visual_con .visual_conTop .visual_conTop_box>div .conTop_smil a {
|
|
|
display: block;
|
|
|
text-align: left;
|
|
|
color: #fff;
|
|
|
}
|
|
|
|
|
|
-.visual_con .visual_conTop .visual_conTop_box > div .conTop_smil span {
|
|
|
+.visual_con .visual_conTop .visual_conTop_box>div .conTop_smil span {
|
|
|
display: inline-block;
|
|
|
margin-left: 0.2vw;
|
|
|
}
|
|
|
|
|
|
-.visual_con .visual_conTop .visual_conTop_box > div .conTop_smil a.sz {
|
|
|
+.visual_con .visual_conTop .visual_conTop_box>div .conTop_smil a.sz {
|
|
|
color: #ff9900;
|
|
|
}
|
|
|
|
|
|
-.visual_con .visual_conTop .visual_conTop_box > div .conTop_smil a.xd {
|
|
|
+.visual_con .visual_conTop .visual_conTop_box>div .conTop_smil a.xd {
|
|
|
color: #12fe81;
|
|
|
}
|
|
|
|
|
|
-.visual_con .visual_conTop .visual_conTop_box > div .conTop_smil a.null {
|
|
|
+.visual_con .visual_conTop .visual_conTop_box>div .conTop_smil a.null {
|
|
|
visibility: hidden;
|
|
|
}
|
|
|
|
|
|
@@ -475,7 +673,7 @@ const option = reactive({
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
-.visual_con .visual_conBot > img {
|
|
|
+.visual_con .visual_conBot>img {
|
|
|
position: absolute;
|
|
|
width: 25px;
|
|
|
height: 25px;
|
|
|
@@ -614,8 +812,73 @@ const option = reactive({
|
|
|
font-size: 0.85vw !important;
|
|
|
color: #d7dcf6;
|
|
|
}
|
|
|
-</style>
|
|
|
|
|
|
+#unity-container {
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+}
|
|
|
+
|
|
|
+#unity-canvas {
|
|
|
+ width: 100vw !important;
|
|
|
+ height: 100vh !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* 实验室介绍 */
|
|
|
+.jieshao-top {
|
|
|
+ display: flex;
|
|
|
+ margin-left: 2vw;
|
|
|
+ /* align-items: center; */
|
|
|
+}
|
|
|
+
|
|
|
+.js-left img {
|
|
|
+ width: 7vw;
|
|
|
+}
|
|
|
+
|
|
|
+.js-right {
|
|
|
+ /* margin-top: 1vw; */
|
|
|
+ margin-left: 1vw;
|
|
|
+}
|
|
|
|
|
|
+.js-right div{
|
|
|
+ width: 12vw;
|
|
|
+ background-size: 100%;
|
|
|
+ background-image:url("../../assets/tb.png");
|
|
|
+ background-repeat:no-repeat;/*设置背景不重复*/
|
|
|
+ margin-top: 1vw;
|
|
|
+}
|
|
|
|
|
|
+.js-color {
|
|
|
+ font-size: 1.2vw;
|
|
|
+ color: #d4bb74;
|
|
|
+ margin: 0 .5vw;
|
|
|
+ font-weight: bold;
|
|
|
+ font-style:italic
|
|
|
+}
|
|
|
+
|
|
|
+.js-bottom {
|
|
|
+ color: #d4bb74;
|
|
|
+ font-size: 1.2vw;
|
|
|
+ font-weight: bold;
|
|
|
+ font-style:italic
|
|
|
+}
|
|
|
|
|
|
+.jieshao-bottom {
|
|
|
+ display: flex;
|
|
|
+ margin-left: 1vw;
|
|
|
+}
|
|
|
+.js-flex{
|
|
|
+ display: flex;
|
|
|
+ margin-left: 1vw;
|
|
|
+}
|
|
|
+.js-tb{
|
|
|
+ width: 3.5vw;
|
|
|
+ background-size: 100%;
|
|
|
+ background-image:url("../../assets/hh.png");
|
|
|
+ background-repeat:no-repeat;/*设置背景不重复*/
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.js-span{
|
|
|
+ margin-left: 3vw;
|
|
|
+}
|
|
|
+</style>
|
