Skip to content

C
chuanganqi
Commit 74548523 authored by 纪泽龙's avatar 纪泽龙
Browse files
Options

更新像素分辨率

parent 824da7bb
Hide whitespace changes
Inline Side-by-side
Showing with 945 additions and 70 deletions
dist.zip 0 → 100644
View file @ 74548523
File added
src/components/DeviceScrollTable.vue
View file @ 74548523
......@@ -154,7 +154,7 @@ export default {
.header-row {
display: flex;
align-items: center;
height: 42px;
height: 22px;
// background: rgba(0, 124, 225, 0.4);
background: linear-gradient(
180deg,
......
src/components/HazardOverviewB.vue
View file @ 74548523
......@@ -141,16 +141,16 @@ export default {
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
margin-left: 16px;
gap: 8px;
// margin-left: 16px;
}
.legend-item {
display: flex;
align-items: center;
// justify-content: space-between;
height: 30px;
padding: 0 12px;
height: 25px;
padding: 0 10px;
// background: linear-gradient(
// 90deg,
// rgba(64, 156, 255, 0.35) 0%,
......@@ -173,22 +173,22 @@ export default {
.label {
// flex: 1;
width: 150px;
font-size: 14px;
width: 82px;
font-size: 12px;
white-space: nowrap;
// margin-right: 100px;
}
.value {
font-size: 16px;
font-size: 14px;
font-weight: 600;
width: 50px;
width: 30px;
text-align: center;
}
.value2 {
font-size: 16px;
font-size: 14px;
font-weight: 600;
width: 100px;
width: 50px;
text-align: right;
}
</style>
src/components/Title.vue
View file @ 74548523
......@@ -2,7 +2,7 @@
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2026-03-10 09:16:21
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2026-03-10 09:46:20
* @LastEditTime: 2026-03-13 10:16:55
* @FilePath: /chuanganqi/src/components/Title.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
......@@ -29,7 +29,7 @@ export default {
</script>
<style lang="scss" scoped>
.title{
font-size: 22px;
font-size: 14px;
color:#fff;
}
......
src/components/ccCom.vue
View file @ 74548523
......@@ -2,7 +2,7 @@
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2026-03-10 13:19:12
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2026-03-11 16:39:31
* @LastEditTime: 2026-03-13 10:35:50
* @FilePath: /chuanganqi/src/components/ccCom.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
......@@ -12,7 +12,7 @@
@click="
$router.push({
path: '/ind2',
query: { ...itemData},
query: { ...itemData },
})
"
>
......@@ -55,32 +55,33 @@ export default {
<style lang="scss" scoped>
.cc-pic {
cursor: pointer;
width: 226px;
height: 60px;
width: 120px;
height: 59px;
background: url("~@/assets/Ind/ccPic.png") no-repeat center center;
background-size: 100% 100%;
display: flex;
color: #fff;
padding-left: 20px;
padding-top: 8px;
padding-left: 8px;
padding-top:12px;
box-sizing: border-box;
.l {
margin-right: 54px;
margin-right: 14px;
.t {
font-size: 16px;
font-size: 13px;
margin-bottom:3px;
}
.b {
font-size: 18px;
font-size: 14px;
}
}
.r {
font-size: 16px;
font-size: 12px;
.b {
position: relative;
top: -5px;
top: 3px;
.num {
font-size: 22px;
font-size: 14px;
}
}
}
......
src/components/picText.vue
View file @ 74548523
......@@ -37,7 +37,7 @@ export default {
<style lang="scss" scoped>
.pic-text {
// width: 194px;
height: 64px;
height: 44px;
display: flex;
}
.r {
......@@ -48,9 +48,9 @@ export default {
color: #fff;
}
.t1 {
font-size: 18px;
font-size: 12px;
}
.t2 {
font-size: 30px;
font-size: 22px;
}
</style>
src/componentsOld/DeviceScrollTable.vue 0 → 100644
View file @ 74548523
<template>
<div class="device-scroll-table" :style="rootStyle">
<div class="header-row">
<div class="col id">编号</div>
<div class="col type">老化总数</div>
<div class="col date">状态</div>
<div class="col status">运行时长</div>
<div class="col jindu">任务进度</div>
</div>
<div
class="body"
ref="body"
@mouseenter="isPaused = true"
@mouseleave="isPaused = false"
>
<div
class="scroll"
:class="{ 'is-scrolling': shouldScroll, 'is-paused': isPaused }"
:style="shouldScroll ? { animationDuration: scrollDuration + 's' } : {}"
>
<div v-for="row in rows" :key="row.id + row.date" class="row">
<div class="col id">{{ row.id }}</div>
<div class="col type">{{ row.type }}</div>
<div class="col date">{{ row.date }}</div>
<div class="col status">
{{ row.status }}
</div>
<div class="col jindu txt">{{ row.jindu }}</div>
</div>
<template v-if="shouldScroll">
<div
v-for="(row, index) in rows"
:key="'clone-' + index + row.id"
class="row"
>
<div class="col id">{{ row.id }}</div>
<div class="col type">{{ row.type }}</div>
<div class="col date">{{ row.date }}</div>
<div class="col status">
{{ row.status }}
</div>
<div class="col jindu txt">{{ row.jindu }}</div>
</div>
</template>
</div>
</div>
</div>
</template>
<script>
export default {
name: "DeviceScrollTable",
props: {
rows: {
type: Array,
default() {
return [
{
id: "2505151",
type: "200",
date: "云顶",
status: "150",
jindu: "96%",
},
{
id: "2505152",
type: "200",
date: "云顶",
status: "150",
jindu: "96%",
},
{
id: "2505153",
type: "200",
date: "云顶",
status: "150",
jindu: "96%",
},
{
id: "2505154",
type: "200",
date: "云顶",
status: "150",
jindu: "96%",
},
{
id: "2505155",
type: "200",
date: "云顶",
status: "150",
jindu: "96%",
},
];
},
},
speed: {
type: Number,
default: 20,
},
height: {
type: Number,
default: 180,
},
},
data() {
return {
shouldScroll: false,
isPaused: false,
};
},
computed: {
scrollDuration() {
const rowsCount = this.rows.length || 1;
return Math.max(6, rowsCount * this.speed * 0.1);
},
rootStyle() {
return this.height ? { height: this.height + "px" } : { height: "100%" };
},
},
mounted() {
this.updateScrollState();
window.addEventListener("resize", this.updateScrollState);
},
updated() {
this.updateScrollState();
},
beforeDestroy() {
window.removeEventListener("resize", this.updateScrollState);
},
methods: {
updateScrollState() {
this.$nextTick(() => {
const body = this.$refs.body;
if (!body) {
this.shouldScroll = false;
return;
}
this.shouldScroll = body.scrollHeight > body.clientHeight;
});
},
},
};
</script>
<style lang="scss" scoped>
.device-scroll-table {
width: 100%;
color: #ffffff;
font-size: 14px;
// background: #000;
overflow: hidden;
}
.header-row {
display: flex;
align-items: center;
height: 42px;
// background: rgba(0, 124, 225, 0.4);
background: linear-gradient(
180deg,
rgba(69, 204, 255, 0.63) 6%,
rgba(0, 0, 0, 0) 100%
);
font-weight: 600;
}
.body {
padding: 6px 0;
height: calc(100% - 42px);
overflow: hidden;
}
.scroll {
display: flex;
flex-direction: column;
}
.scroll.is-scrolling {
animation-name: tableScroll;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.scroll.is-paused {
animation-play-state: paused;
}
.row {
display: flex;
align-items: center;
height: 32px;
border-bottom: 1px solid rgba(14, 84, 178, 0.56);
}
.col {
padding: 0 10px;
white-space: nowrap;
}
.col.id {
width: 28%;
padding-left: 20px;
}
.col.type {
width: 20%;
}
.col.date {
width: 20%;
}
.col.status {
width: 20%;
// display: flex;
// justify-content: flex-end;
text-align: center;
}
.col.jindu {
width: 20%;
display: flex;
justify-content: flex-end;
padding-right: 30px;
&.txt {
padding-right: 40px;
}
}
.tag {
display: inline-block;
min-width: 40px;
text-align: center;
padding: 2px 6px;
border-radius: 2px;
font-size: 12px;
}
.tag-blue {
background: #1ea7ff;
}
.tag-orange {
background: #ff6a00;
}
@keyframes tableScroll {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-50%);
}
}
</style>
src/componentsOld/HazardOverviewB.vue 0 → 100644
View file @ 74548523
<template>
<div class="hazard-overview">
<div ref="chart" class="hazard-ring"></div>
<div class="legend">
<div v-for="item in items" :key="item.name" class="legend-item">
<span class="dot" :style="{ backgroundColor: item.color }"></span>
<span class="label">{{ item.name }}</span>
<span class="value">{{ item.value }}</span>
<span class="value2">{{ item.value2 }}</span>
</div>
</div>
</div>
</template>
<script>
export default {
name: "HazardOverview",
props: {
items: {
type: Array,
default() {
return [
{ name: "信号低数量", value: 30, value2: "30%", color: "#FF5656" },
{ name: "信号高数量", value: 19, value2: "19%", color: "#468AFF" },
{ name: "不通电数量", value: 21, value2: "21%", color: "#F2C343" },
{ name: "基线不稳数量", value: 16, value2: "16%", color: "#26D5DB" },
{ name: "阻抗异常数量", value: 14, value2: "14%", color: "#B676FE" },
];
},
},
},
data() {
return {
chart: null,
};
},
computed: {
totalValue() {
return this.items.reduce((sum, item) => {
const value = Number(item.value) || 0;
return sum + value;
}, 0);
},
},
mounted() {
this.initChart();
window.addEventListener("resize", this.handleResize);
},
beforeDestroy() {
window.removeEventListener("resize", this.handleResize);
if (this.chart) {
this.chart.dispose();
this.chart = null;
}
},
watch: {
items: {
handler(obj) {
this.updateChart();
console.log(123,obj)
},
deep: true,
},
},
methods: {
initChart() {
if (!this.$refs.chart) {
return;
}
this.chart = this.$echarts.init(this.$refs.chart);
this.updateChart();
},
handleResize() {
if (this.chart) {
this.chart.resize();
}
},
updateChart() {
if (!this.chart) {
return;
}
const data = this.items.map((item) => ({
name: item.name,
value: Number(item.value) || 0,
}));
this.chart.setOption({
color: this.items.map((item) => item.color),
title: {
text: String(this.totalValue),
subtext: "总数",
left: "center",
top: "center",
textStyle: {
color: "#ffffff",
fontSize: 32,
fontWeight: "bold",
},
subtextStyle: {
color: "#ffffff",
fontSize: 14,
},
},
series: [
{
type: "pie",
radius: ["68%", "86%"],
center: ["50%", "50%"],
startAngle: 90,
label: { show: false },
labelLine: { show: false },
emphasis: { scale: false },
itemStyle: {
borderWidth: 3,
borderColor: "rgba(3, 16, 28, 0.9)",
},
data,
},
],
});
},
},
};
</script>
<style lang="scss" scoped>
.hazard-overview {
width: 100%;
display: flex;
align-items: center;
}
.hazard-ring {
// width: 200px;
// height: 200px;
width: 100%;
height: 100%;
}
.legend {
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
margin-left: 16px;
}
.legend-item {
display: flex;
align-items: center;
// justify-content: space-between;
height: 30px;
padding: 0 12px;
// background: linear-gradient(
// 90deg,
// rgba(64, 156, 255, 0.35) 0%,
// rgba(64, 156, 255, 0.08) 100%
// );
// border: 1px solid rgba(64, 156, 255, 0.5);
color: #ffffff;
background: rgba(34, 131, 248,.16);
// box-shadow: inset 0 0 14px rgba(64, 156, 255, 0.25);
}
.dot {
width: 16px;
height: 8px;
border-radius: 2px;
margin-right: 10px;
flex-shrink: 0;
}
.label {
// flex: 1;
width: 150px;
font-size: 14px;
white-space: nowrap;
// margin-right: 100px;
}
.value {
font-size: 16px;
font-weight: 600;
width: 50px;
text-align: center;
}
.value2 {
font-size: 16px;
font-weight: 600;
width: 100px;
text-align: right;
}
</style>
src/componentsOld/Title.vue 0 → 100644
View file @ 74548523
<!--
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2026-03-10 09:16:21
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2026-03-13 10:18:42
* @FilePath: /chuanganqi/src/components/Title.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<div class="title">
{{ text }}
</div>
</template>
<script>
export default {
name: "",
props: {
text: {
type: String,
default: "设备实时运行状态",
},
},
data() {
return {};
},
methods: {},
};
</script>
<style lang="scss" scoped>
.title{
font-size: 22px;
color:#fff;
}
</style>
src/componentsOld/UserTypeBarChart.vue 0 → 100644
View file @ 74548523
<template>
<div ref="chart" class="user-type-bar-chart"></div>
</template>
<script>
export default {
name: "UserTypeBarChart",
props: {
categories: {
type: Array,
default() {
return [
"11/8",
"11/9",
"11/10",
"11/10",
"11/11",
];
},
},
residential: {
type: Array,
default() {
return [26, 34, 18, 22, 24, 28, 10];
},
},
industrial: {
type: Array,
default() {
return [18, 24, 8, 18, 20, 26, 22];
},
},
},
data() {
return {
chart: null,
};
},
mounted() {
this.initChart();
window.addEventListener("resize", this.handleResize);
},
beforeDestroy() {
window.removeEventListener("resize", this.handleResize);
if (this.chart) {
this.chart.dispose();
this.chart = null;
}
},
watch: {
categories() {
this.updateChart();
},
residential() {
this.updateChart();
},
industrial() {
this.updateChart();
},
},
methods: {
initChart() {
if (!this.$refs.chart) {
return;
}
this.chart = this.$echarts.init(this.$refs.chart);
this.updateChart();
},
handleResize() {
if (this.chart) {
this.chart.resize();
}
},
updateChart() {
if (!this.chart) {
return;
}
this.chart.setOption({
grid: {
left: 8,
right: 8,
top: 30,
bottom: 20,
containLabel: true,
},
legend: {
top: 0,
right: 10,
itemWidth: 16,
itemHeight: 8,
textStyle: {
color: "#ffffff",
fontSize: 12,
},
},
xAxis: {
type: "category",
data: this.categories,
axisLine: { lineStyle: { color: "rgba(255,255,255,0.2)" } },
axisTick: { show: false },
axisLabel: {
color: "#ffffff",
fontSize: 11,
},
},
yAxis: {
type: "value",
axisLine: { show: false },
axisTick: { show: false },
axisLabel: { show: true,color:'#fff' },
splitLine: {
lineStyle: { color: "rgba(255,255,255,0.2)" },
},
},
series: [
{
name: "通过率",
type: "bar",
data: this.residential,
barWidth: 10,
itemStyle: {
borderRadius: [2, 2, 0, 0],
// color: "#98F4FF",
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#98F4FF" }, // 0% 处的颜色
{ offset: 1, color: "#45CCFF" }, // 100% 处的颜色
]),
},
},
{
name: "异常率",
type: "bar",
data: this.industrial,
barWidth: 10,
itemStyle: {
borderRadius: [2, 2, 0, 0],
// color: "#FF4545",
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#FFB898" }, // 0% 处的颜色
{ offset: 1, color: "#FF4545" }, // 100% 处的颜色
]),
},
},
],
});
},
},
};
</script>
<style lang="scss" scoped>
.user-type-bar-chart {
width: 100%;
height: 100%;
}
</style>
src/componentsOld/ccCom.vue 0 → 100644
View file @ 74548523
<!--
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2026-03-10 13:19:12
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2026-03-11 16:39:31
* @FilePath: /chuanganqi/src/components/ccCom.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<div
class="cc-pic"
@click="
$router.push({
path: '/ind2',
query: { ...itemData},
})
"
>
<div class="l">
<div class="t">编号</div>
<div class="b">{{ itemData.code }}</div>
</div>
<div class="r">
<div class="t">容量</div>
<div class="b">
<span class="num">{{ itemData.allNum }}</span>
<span>枚</span>
</div>
</div>
</div>
</template>
<script>
export default {
name: "",
props: {
itemData: {
string: Object,
default: () => {
return {
code: 25051,
startTime: "2026-3-10 12:12",
jd: "90%",
allNum: 2768,
};
},
},
},
data() {
return {};
},
methods: {},
};
</script>
<style lang="scss" scoped>
.cc-pic {
cursor: pointer;
width: 226px;
height: 60px;
background: url("~@/assets/Ind/ccPic.png") no-repeat center center;
background-size: 100% 100%;
display: flex;
color: #fff;
padding-left: 20px;
padding-top: 8px;
box-sizing: border-box;
.l {
margin-right: 54px;
.t {
font-size: 16px;
}
.b {
font-size: 18px;
}
}
.r {
font-size: 16px;
.b {
position: relative;
top: -5px;
.num {
font-size: 22px;
}
}
}
}
</style>
src/componentsOld/picText.vue 0 → 100644
View file @ 74548523
<template>
<div class="pic-text">
<img class="img" :src="src" alt="" />
<div class="r">
<div class="t1">{{text1}}</div>
<div class="t2">{{text2}}</div>
</div>
</div>
</template>
<script>
import cl1 from "@/assets/Ind/cl1.png";
export default {
name: "",
props: {
src: {
type: String,
default: cl1,
},
text1: {
type: String,
default: "运行设备数量",
},
text2: {
type: [String, Number],
default: 15,
},
},
data() {
return {
cl1,
};
},
methods: {},
};
</script>
<style lang="scss" scoped>
.pic-text {
// width: 194px;
height: 64px;
display: flex;
}
.r {
margin-left: 20px;
}
.t1,
.t2 {
color: #fff;
}
.t1 {
font-size: 18px;
}
.t2 {
font-size: 30px;
}
</style>
src/main.js
View file @ 74548523
......@@ -2,7 +2,7 @@
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2026-03-09 10:19:49
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2026-03-11 10:32:29
* @LastEditTime: 2026-03-13 09:18:15
* @FilePath: /chuanganqi/src/main.js
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -17,6 +17,8 @@ import 'element-ui/lib/theme-chalk/index.css';
import * as echarts from "echarts";
import '@/utils/rem'
Vue.prototype.$echarts = echarts;
let dayjs = require("dayjs");
import axios from "axios";
......
src/views/Ind.vue
View file @ 74548523
......@@ -2,7 +2,7 @@
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2026-03-09 13:59:46
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2026-03-11 17:01:29
* @LastEditTime: 2026-03-13 10:47:41
* @FilePath: /chuanganqi/src/views/Ind.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
......@@ -201,10 +201,10 @@ export default {
console.log(data);
this.tableRows = data.table;
});
getData("cgq-f").then((res) => {
getData("cgq-f").then((res) => {
const data = JSON.parse(res.data[0].jsonDataStr);
console.log(data);
this.arr = data.arr
this.arr = data.arr;
});
},
},
......@@ -219,7 +219,7 @@ export default {
}
.time {
font-size: 28px;
font-size: 20px;
top: 66px;
left: 48px;
display: flex;
......@@ -231,9 +231,9 @@ export default {
}
}
.qw {
width: 290px;
height: 50px;
background: url("~@/assets/Ind/qw.png") repeat center center;
width: 200px;
height: 38px;
background: url("~@/assets/Ind/qw.png") no-repeat center center;
background-size: 100%;
position: absolute;
top: 60px;
......@@ -241,32 +241,33 @@ export default {
z-index: 9999;
color: #fff;
font-size: 28px;
font-size: 20px;
.a {
position: absolute;
top: -3px;
left: 27px;
top: -1px;
left: 19px;
}
.b {
position: absolute;
top: -3px;
top: -1px;
left: 154px;
left: 109px;
}
.c {
position: absolute;
top: -6px;
left: 264px;
top: -2px;
left: 183px;
}
.d {
position: absolute;
top: 31px;
right: -23px;
font-size: 14px;
top: 22.5px;
right: -19px;
font-size: 11px;
}
}
.top {
width: 1920px;
height: 108px;
width: 1280px;
height: 90px;
overflow: hidden;
box-sizing: border-box;
background: url("~@/assets/Ind/top.png") no-repeat center -12px;
......@@ -277,23 +278,22 @@ export default {
.bottom {
> div {
box-sizing: border-box;
padding-top: 20px;
padding-left: 35px;
padding-bottom: 30px;
padding-right: 30px;
overflow: hidden;
padding-top: 15px;
padding-left: 16px;
padding-bottom: 20px;
padding-right: 16px;
.tlt {
margin-bottom: 20px;
margin-bottom: 12px;
}
.text {
margin-bottom: 20px;
.cr-tx {
color: #fff;
.t {
font-size: 16px;
font-size: 12px;
}
.b {
font-size: 28px;
font-size: 22px;
}
}
}
......@@ -316,21 +316,22 @@ export default {
// background: red;
.cl {
width: 280px;
width: 16.5%;
height: 100%;
background: url("~@/assets/Ind/cl.png") no-repeat center center;
background-size: 100% 100%;
}
.cc {
width: 1040px;
width: 56.1%;
height: 100%;
background: url("~@/assets/Ind/cc.png") no-repeat center center;
background-size: 100% 100%;
}
.cr {
width: 448px;
width: 24.3%;
height: 100%;
background: url("~@/assets/Ind/cr.png") no-repeat center center;
background-size: 100% 100%;
}
......@@ -343,19 +344,22 @@ export default {
padding: 0 40px;
.bl {
width: 672px;
width: 37.3%;
height: 100%;
background: url("~@/assets/Ind/bl.png") no-repeat center center;
background-size: 100% 100%;
overflow: hidden;
}
.br {
width: 1136px;
width: 60.7%;
height: 100%;
background: url("~@/assets/Ind/br.png") no-repeat center center;
background-size: 100% 100%;
overflow: hidden;
}
}
.chars-title {
font-size: 14px;
color: #fff;
}
</style>
src/views/Ind2.vue
View file @ 74548523
......@@ -2,7 +2,7 @@
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2026-03-11 09:36:51
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2026-03-12 14:29:19
* @LastEditTime: 2026-03-12 16:58:28
* @FilePath: /chuanganqi/src/views/ind2.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
......@@ -254,7 +254,7 @@ export default {
width: 100%;
}
.small-text {
font-size: 22px !important;
font-size: 14px !important;
}
.back {
position: fixed;
......
src/views/Index.vue
View file @ 74548523
......@@ -2,7 +2,7 @@
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2026-01-05 10:39:41
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2026-03-11 14:15:58
* @LastEditTime: 2026-03-13 10:12:20
* @FilePath: /huaxindd-web/src/views/Index/index.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
......@@ -43,7 +43,7 @@ export default {
this.innerWidth = window.innerWidth;
this.innerHeight = window.innerHeight;
// this.scaleX = window.innerWidth / 2880;
this.scaleX = window.innerWidth / 1920;
// this.scaleX = window.innerWidth / 1920;
},
methods: {
back() {
......@@ -55,15 +55,14 @@ export default {
<style lang="scss" scoped>
.index {
// width:2880px;
width: 1920px;
width: 100%;
height: 100vh;
background: black;
position: relative;
left: 50%;
// left: 50%;
top: 0px;
// margin-left: -1440px;
margin-left: -960px;
// margin-left: -960px;
overflow: hidden;
// .back {
// position: absolute;
......
src/views/IndexOld.vue 0 → 100644
View file @ 74548523
<!--
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2026-01-05 10:39:41
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2026-03-12 17:32:04
* @FilePath: /huaxindd-web/src/views/Index/index.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<div
class="index"
:style="{
transform: `scale(${scaleX},${scaleX})`,
top: `-${((1 - scaleX) * innerHeight) / 2}px`,
}"
>
<!-- <div class="back" @click="back">跳转后台</div> -->
<component :is="currentTabComponent"></component>
</div>
</template>
<script>
import Ind from "./Ind.vue";
export default {
name: "",
components: {
},
data() {
return {
scaleX: 1,
innerWidth: 0,
innerHeight: 0,
currentTabComponent: Ind,
};
},
created() {
this.innerWidth = window.innerWidth;
this.innerHeight = window.innerHeight;
// this.scaleX = window.innerWidth / 2880;
this.scaleX = window.innerWidth / 1920;
},
methods: {
back() {
// this.$router.push("/checktask/jmchacktask");
},
},
};
</script>
<style lang="scss" scoped>
.index {
// width:2880px;
width: 1920px;
height: 100vh;
background: black;
position: relative;
left: 50%;
top: 0px;
// margin-left: -1440px;
margin-left: -960px;
overflow: hidden;
// .back {
// position: absolute;
// border: 1px solid rgba(0, 124, 225, 1);
// border-radius: 5px;
// cursor: pointer;
// padding: 5px 10px;
// color: #fff;
// font-size: 16px;
// right: 436px;
// top: 113px;
// &:hover {
// background: rgba(0, 124, 225, 0.4);
// }
// }
}
</style>
vue.config.js
View file @ 74548523
......@@ -2,7 +2,7 @@
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2026-03-09 10:19:49
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2026-03-09 16:51:20
* @LastEditTime: 2026-03-13 10:10:48
* @FilePath: /chuanganqi/vue.config.js
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......
yarn.lock
View file @ 74548523
......@@ -1892,7 +1892,7 @@ at-least-node@^1.0.0:
autoprefixer@^10.2.4:
version "10.4.27"
resolved "https://mirrors.cloud.tencent.com/npm/autoprefixer/-/autoprefixer-10.4.27.tgz#51ea301a5c3c5f8642f8e564759c4f573be486f2"
resolved "https://mirrors.huaweicloud.com/repository/npm/autoprefixer/-/autoprefixer-10.4.27.tgz#51ea301a5c3c5f8642f8e564759c4f573be486f2"
integrity sha512-NP9APE+tO+LuJGn7/9+cohklunJsXWiaWEfV3si4Gi/XHDwVNgkwr1J3RQYFIvPy76GmJ9/bW8vyoU1LcxwKHA==
dependencies:
browserslist "^4.28.1"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment