更换框架模板原始信息

dev-0829
ccongli 1 year ago
parent 4a5629bc4e
commit 019281f80a

Binary file not shown.

After

Width:  |  Height:  |  Size: 454 KiB

@ -1,5 +1,5 @@
{ {
"name": "vol.vue3", "name": "yxsc",
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"scripts": { "scripts": {

@ -5,8 +5,8 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="keywords" content=".netccore,dotnet core,vue,element,element plus,vue3" /> <meta name="keywords" content=".netccore,dotnet core,vue,element,element plus,vue3,yxsz.cc" />
<meta name="description" content=".NetCore+Vue前后端分离提供Vue2、Vue3版本不一样的快速开发框架" /> <meta name="description" content="云息数采,为工厂数字化赋能" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
</head> </head>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

@ -84,22 +84,22 @@ const routes = [
anonymous:true anonymous:true
} }
}, },
{ // {
path: '/app/guide', // path: '/app/guide',
name: 'apphome', // name: 'apphome',
meta: { // meta: {
anonymous: true // anonymous: true
}, // },
component: () => import('@/views/h5/Guide.vue'), // component: () => import('@/views/h5/Guide.vue'),
}, // },
{ // {
path: '/bigdata', // path: '/bigdata',
name: 'bigdata', // name: 'bigdata',
component: () => import('@/views/charts/bigdata.vue'), // component: () => import('@/views/charts/bigdata.vue'),
meta: { // meta: {
keepAlive: false // keepAlive: false
} // }
}, // },
{ {
path: '/dataview', path: '/dataview',
name: 'dataview', name: 'dataview',

@ -1,382 +1,20 @@
<template> <template>
<div class="home-contianer"> <div class="home-contianer">
<div class="h-top"> <div class="title">欢迎登录云息数采平台</div>
<div class="h-top-left" id="h-chart1">left</div>
<div class="h-top-center">
<div class="n-item">
<div
@click="open(item)"
class="item"
:class="'item' + (index + 1)"
v-for="(item, index) in center"
:key="index"
>
<i
style="font-size: 30px; padding-bottom: 10px"
:class="item.icon"
:size="20"
></i>
<br />
{{ item.title }}
</div>
</div>
</div>
<div class="h-top-right task-table">
<h3 class="h3">#框架Vue3.x版本变更说明</h3>
<table border="0" cellspacing="0" cellpadding="0">
<tr v-for="(row, index) in list" :key="index">
<td>{{ index + 1 }}</td>
<td>{{ row.desc }}</td>
</tr>
</table>
</div>
</div>
<div class="h-chart">
<div class="h-left-grid">
<div class="item" v-for="(item, index) in grid" :key="index">
<div class="icon-text">
<i :class="item.icon"></i>
<span class="name">{{ item.name }}</span>
</div>
<div class="desc">{{ item.desc }}</div>
</div>
</div>
<div id="h-chart2"></div>
<div id="h-chart3"></div>
</div>
<div style="display: flex;">
<div
id="h-chart4"
style="height: 350px; background: white; flex: 1;padding-top:15px;"
></div>
<div
id="h-chart5"
style="height: 350px; background: white; flex: 1;padding-top:15px;"
></div>
</div>
</div> </div>
</template> </template>
<script> <script>
import * as echarts from 'echarts';
import { chart1, chart2, chart3, chart4 } from './home/home-chart-options';
import { ref, onMounted, onUnmounted } from 'vue';
var $chart2;
export default { export default {
components: {}, components: {},
data() { data() {
return { return {
center: [
{
title: 'GitHub',
icon: 'el-icon-set-up',
url: 'https://github.com/cq-panda/Vue.NetCore'
},
{
title: 'Gitee',
icon: 'el-icon-turn-off',
url: 'https://gitee.com/x_discoverer/Vue.NetCore'
},
{
title: '框架Vue2版本',
icon: 'el-icon-reading',
url: 'http://v2.volcore.xyz'
},
{
title: '框架视频',
icon: 'el-icon-document',
url: 'https://www.cctalk.com/m/group/90268531'
},
{
title: '小程序/app/h5',
icon: 'el-icon-chat-line-round',
url: 'http://v2.volcore.xyz/app/guide'
},
{
title: 'QQ3群743852316',
icon: 'el-icon-chat-dot-round',
url: 'https://jq.qq.com/?_wv=1027&k=Sqstuy0M'
}
],
n: 90,
value1: '1',
applicants: {
//
day: 20, //
week: 150, //
month: 1200, //
totalBoy: 800,
totalGirl: 890,
taotal: 1690
}, //
list: [
{ desc: '框架2.x版本不支持直接升级Vue3版本(代码生成器已修改)' },
{ desc: '框架使用的Element Plus组件移除了Iview组件的依赖' },
{ desc: '框架内部组件全部重新优化,相比2.x版本首屏大小减少60%' },
{ desc: '框架Vue2版本会继续维护,并与Vue3版本同步更新,请放心使用' },
{ desc: '框架Vue2、Vue3版本开发文档一致(差异部分文档会备注说明)' },
//{ desc: "使Vue2使;使Vue3" },
{
desc: 'vue2、vue3文档相同,开文档大部分文档仍然使用的vue2语法'
},
{
desc: '自定义部分既可以使用vue3语法与可以使用vue3语法'
}
//(vue2/3使),使vue3
],
grid: [
{
name: '用户管理',
desc: '系统用户管理,注册用户3000000人。',
icon: 'el-icon-user'
},
{
name: '站内消息',
desc: '您有一条新的消息,请及时处理。',
icon: 'el-icon-chat-dot-round'
},
{
name: '系统管理',
desc: '这里放点什么,还没想好。',
icon: 'el-icon-setting'
},
{
name: '还没想好',
desc: '这里不知道应该放点什么或者写点什么。',
icon: 'el-icon-document'
},
{
name: '语音导航',
desc: '高德地图林志玲为您语音导航。',
icon: 'el-icon-microphone'
},
{
name: '垃圾回收',
desc: '删除过的数据在此处找回。。。。',
icon: 'el-icon-delete'
}
]
};
},
setup() {
let open = (item) => {
window.open(item.url, '_blank');
};
let interval;
onMounted(() => {
$chart = echarts.init(document.getElementById('h-chart1'));
$chart.setOption(chart1);
$chart2 = echarts.init(document.getElementById('h-chart2'));
$chart2.setOption(chart2);
// interval = setInterval(() => {
// chart2.xAxis[0].data.splice(0, 1);
// let lastYear =
// chart2.xAxis[0].data[chart2.xAxis[0].data.length - 1] * 1 + 1;
// chart2.xAxis[0].data.push(lastYear);
// chart2.series[0].data.splice(0, 1);
// chart2.series[0].data.push(~~(Math.random() * 1000));
// chart2.series[1].data.splice(0, 1);
// chart2.series[1].data.push(~~(Math.random() * 1000));
// $chart2.setOption(chart2);
// }, 2000);
$chart3 = echarts.init(document.getElementById('h-chart3'));
$chart3.setOption(chart3);
let $chart4 = echarts.init(document.getElementById('h-chart4'));
$chart4.setOption(chart4);
let $chart5 = echarts.init(document.getElementById('h-chart5'));
$chart5.setOption(chart2);
});
onUnmounted(() => {
interval && clearInterval(interval);
if ($chart) {
$chart.dispose();
$chart2.dispose();
$chart3.dispose();
} }
});
return { open };
},
destroyed() {
$chart2 = null;
} }
}; };
var $chart, $chart2, $chart3;
// window.addEventListener("resize", function () {
// $chart2.setOption(chart2);
// });
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.home-contianer { .title {
padding: 6px; margin: 10px;
background: #eee;
width: 100%;
height: 100%;
// max-width: 800px;
// position: absolute;
top: 0;
right: 0;
left: 0;
margin: 0 auto;
.h-top {
display: flex;
.h-top-left {
height: 100%;
width: 300px;
background: white;
}
height: 300px;
}
.h-top > div {
border: 1px solid #e8e7e7;
border-radius: 5px;
// margin: 6px;
}
.h-top-center {
height: 100%;
background: white;
margin: 0 6px;
display: flex;
flex-direction: column;
flex: 1;
.item1 .num {
padding-top: 28px;
}
.item2 .num {
padding-bottom: 20px;
}
.n-item {
width: 100%;
height: 100%;
text-align: center;
cursor: pointer;
// display: flex;
.item {
border-right: 1px solid #e5e5e5;
width: 33.3333333%;
float: left;
height: 50%;
border-bottom: 1px solid #e5e5e5;
padding: 47px 0;
font-size: 13px;
}
.item:hover {
background: #f9f9f9;
cursor: pointer;
}
.item:last-child {
border-right: 0;
}
.item3,
.item6 {
border-right: 0;
}
.num {
word-break: break-all;
color: #282727;
font-size: 30px;
transition: transform 0.8s;
}
.num:hover {
color: #55ce80;
transform: scale(1.2);
}
.text {
font-size: 13px;
color: #777;
}
}
}
.h-top-right {
// flex: 1;
width: 400px;
height: 100%;
background: white;
}
.h3 {
padding: 7px 15px;
font-weight: 500;
background: #fff;
border-bottom: 1px dotted #d4d4d4;
}
}
.task-table {
table {
width: 100%;
.thead {
font-weight: bold;
}
tr {
cursor: pointer;
td {
border-bottom: 1px solid #f3f3f3;
padding: 9px 8px;
font-size: 12px;
}
}
tr:hover {
background: #eee;
}
}
}
.h-chart {
height: 340px;
margin: 6px 0px;
display: flex;
.h-left-grid {
width: 300px;
height: 100%;
background: white;
display: inline-block;
.name {
margin-left: 7px;
}
.item:hover {
background: #f9f9f9;
cursor: pointer;
}
.item {
padding: 22px 14px;
float: left;
width: 50%;
height: 33.33333%;
border-bottom: 1px solid #eee;
border-right: 1px solid #eee;
i {
font-size: 30px;
}
.desc {
font-size: 12px;
color: #c3c3c3;
padding: 5px 0 0 4px;
line-height: 1.5;
}
}
}
}
#h-chart2 {
border-radius: 3px;
background: white;
padding-top: 10px;
height: 100%;
width: 0;
flex: 1;
margin: 0 7px;
}
#h-chart3 {
border-radius: 3px;
padding: 10px 10px 0 10px;
background: white;
// padding-top: 10px;
height: 100%;
width: 400px;
} }
</style> </style>

@ -0,0 +1,382 @@
<template>
<div class="home-contianer">
<div class="h-top">
<div class="h-top-left" id="h-chart1">left</div>
<div class="h-top-center">
<div class="n-item">
<div
@click="open(item)"
class="item"
:class="'item' + (index + 1)"
v-for="(item, index) in center"
:key="index"
>
<i
style="font-size: 30px; padding-bottom: 10px"
:class="item.icon"
:size="20"
></i>
<br />
{{ item.title }}
</div>
</div>
</div>
<div class="h-top-right task-table">
<h3 class="h3">#框架Vue3.x版本变更说明</h3>
<table border="0" cellspacing="0" cellpadding="0">
<tr v-for="(row, index) in list" :key="index">
<td>{{ index + 1 }}</td>
<td>{{ row.desc }}</td>
</tr>
</table>
</div>
</div>
<div class="h-chart">
<div class="h-left-grid">
<div class="item" v-for="(item, index) in grid" :key="index">
<div class="icon-text">
<i :class="item.icon"></i>
<span class="name">{{ item.name }}</span>
</div>
<div class="desc">{{ item.desc }}</div>
</div>
</div>
<div id="h-chart2"></div>
<div id="h-chart3"></div>
</div>
<div style="display: flex;">
<div
id="h-chart4"
style="height: 350px; background: white; flex: 1;padding-top:15px;"
></div>
<div
id="h-chart5"
style="height: 350px; background: white; flex: 1;padding-top:15px;"
></div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts';
import { chart1, chart2, chart3, chart4 } from './home/home-chart-options';
import { ref, onMounted, onUnmounted } from 'vue';
var $chart2;
export default {
components: {},
data() {
return {
center: [
{
title: 'GitHub',
icon: 'el-icon-set-up',
url: 'https://github.com/cq-panda/Vue.NetCore'
},
{
title: 'Gitee',
icon: 'el-icon-turn-off',
url: 'https://gitee.com/x_discoverer/Vue.NetCore'
},
{
title: '框架Vue2版本',
icon: 'el-icon-reading',
url: 'http://v2.volcore.xyz'
},
{
title: '框架视频',
icon: 'el-icon-document',
url: 'https://www.cctalk.com/m/group/90268531'
},
{
title: '小程序/app/h5',
icon: 'el-icon-chat-line-round',
url: 'http://v2.volcore.xyz/app/guide'
},
{
title: 'QQ3群743852316',
icon: 'el-icon-chat-dot-round',
url: 'https://jq.qq.com/?_wv=1027&k=Sqstuy0M'
}
],
n: 90,
value1: '1',
applicants: {
//
day: 20, //
week: 150, //
month: 1200, //
totalBoy: 800,
totalGirl: 890,
taotal: 1690
}, //
list: [
{ desc: '框架2.x版本不支持直接升级Vue3版本(代码生成器已修改)' },
{ desc: '框架使用的Element Plus组件移除了Iview组件的依赖' },
{ desc: '框架内部组件全部重新优化,相比2.x版本首屏大小减少60%' },
{ desc: '框架Vue2版本会继续维护,并与Vue3版本同步更新,请放心使用' },
{ desc: '框架Vue2、Vue3版本开发文档一致(差异部分文档会备注说明)' },
//{ desc: "使Vue2使;使Vue3" },
{
desc: 'vue2、vue3文档相同,开文档大部分文档仍然使用的vue2语法'
},
{
desc: '自定义部分既可以使用vue3语法与可以使用vue3语法'
}
//(vue2/3使),使vue3
],
grid: [
{
name: '用户管理',
desc: '系统用户管理,注册用户3000000人。',
icon: 'el-icon-user'
},
{
name: '站内消息',
desc: '您有一条新的消息,请及时处理。',
icon: 'el-icon-chat-dot-round'
},
{
name: '系统管理',
desc: '这里放点什么,还没想好。',
icon: 'el-icon-setting'
},
{
name: '还没想好',
desc: '这里不知道应该放点什么或者写点什么。',
icon: 'el-icon-document'
},
{
name: '语音导航',
desc: '高德地图林志玲为您语音导航。',
icon: 'el-icon-microphone'
},
{
name: '垃圾回收',
desc: '删除过的数据在此处找回。。。。',
icon: 'el-icon-delete'
}
]
};
},
setup() {
let open = (item) => {
window.open(item.url, '_blank');
};
let interval;
onMounted(() => {
$chart = echarts.init(document.getElementById('h-chart1'));
$chart.setOption(chart1);
$chart2 = echarts.init(document.getElementById('h-chart2'));
$chart2.setOption(chart2);
// interval = setInterval(() => {
// chart2.xAxis[0].data.splice(0, 1);
// let lastYear =
// chart2.xAxis[0].data[chart2.xAxis[0].data.length - 1] * 1 + 1;
// chart2.xAxis[0].data.push(lastYear);
// chart2.series[0].data.splice(0, 1);
// chart2.series[0].data.push(~~(Math.random() * 1000));
// chart2.series[1].data.splice(0, 1);
// chart2.series[1].data.push(~~(Math.random() * 1000));
// $chart2.setOption(chart2);
// }, 2000);
$chart3 = echarts.init(document.getElementById('h-chart3'));
$chart3.setOption(chart3);
let $chart4 = echarts.init(document.getElementById('h-chart4'));
$chart4.setOption(chart4);
let $chart5 = echarts.init(document.getElementById('h-chart5'));
$chart5.setOption(chart2);
});
onUnmounted(() => {
interval && clearInterval(interval);
if ($chart) {
$chart.dispose();
$chart2.dispose();
$chart3.dispose();
}
});
return { open };
},
destroyed() {
$chart2 = null;
}
};
var $chart, $chart2, $chart3;
// window.addEventListener("resize", function () {
// $chart2.setOption(chart2);
// });
</script>
<style lang="less" scoped>
.home-contianer {
padding: 6px;
background: #eee;
width: 100%;
height: 100%;
// max-width: 800px;
// position: absolute;
top: 0;
right: 0;
left: 0;
margin: 0 auto;
.h-top {
display: flex;
.h-top-left {
height: 100%;
width: 300px;
background: white;
}
height: 300px;
}
.h-top > div {
border: 1px solid #e8e7e7;
border-radius: 5px;
// margin: 6px;
}
.h-top-center {
height: 100%;
background: white;
margin: 0 6px;
display: flex;
flex-direction: column;
flex: 1;
.item1 .num {
padding-top: 28px;
}
.item2 .num {
padding-bottom: 20px;
}
.n-item {
width: 100%;
height: 100%;
text-align: center;
cursor: pointer;
// display: flex;
.item {
border-right: 1px solid #e5e5e5;
width: 33.3333333%;
float: left;
height: 50%;
border-bottom: 1px solid #e5e5e5;
padding: 47px 0;
font-size: 13px;
}
.item:hover {
background: #f9f9f9;
cursor: pointer;
}
.item:last-child {
border-right: 0;
}
.item3,
.item6 {
border-right: 0;
}
.num {
word-break: break-all;
color: #282727;
font-size: 30px;
transition: transform 0.8s;
}
.num:hover {
color: #55ce80;
transform: scale(1.2);
}
.text {
font-size: 13px;
color: #777;
}
}
}
.h-top-right {
// flex: 1;
width: 400px;
height: 100%;
background: white;
}
.h3 {
padding: 7px 15px;
font-weight: 500;
background: #fff;
border-bottom: 1px dotted #d4d4d4;
}
}
.task-table {
table {
width: 100%;
.thead {
font-weight: bold;
}
tr {
cursor: pointer;
td {
border-bottom: 1px solid #f3f3f3;
padding: 9px 8px;
font-size: 12px;
}
}
tr:hover {
background: #eee;
}
}
}
.h-chart {
height: 340px;
margin: 6px 0px;
display: flex;
.h-left-grid {
width: 300px;
height: 100%;
background: white;
display: inline-block;
.name {
margin-left: 7px;
}
.item:hover {
background: #f9f9f9;
cursor: pointer;
}
.item {
padding: 22px 14px;
float: left;
width: 50%;
height: 33.33333%;
border-bottom: 1px solid #eee;
border-right: 1px solid #eee;
i {
font-size: 30px;
}
.desc {
font-size: 12px;
color: #c3c3c3;
padding: 5px 0 0 4px;
line-height: 1.5;
}
}
}
}
#h-chart2 {
border-radius: 3px;
background: white;
padding-top: 10px;
height: 100%;
width: 0;
flex: 1;
margin: 0 7px;
}
#h-chart3 {
border-radius: 3px;
padding: 10px 10px 0 10px;
background: white;
// padding-top: 10px;
height: 100%;
width: 400px;
}
</style>

@ -20,9 +20,9 @@
</div> </div>
<div class="vol-container" :style="{ left: menuWidth - 1 + 'px' }"> <div class="vol-container" :style="{ left: menuWidth - 1 + 'px' }">
<div class="vol-header"> <div class="vol-header">
<div class="project-name">Vol开发框架Vue3版本</div> <div class="project-name">上海尼可尼泵业有限公司</div>
<div class="header-text"> <div class="header-text">
<div class="h-link"> <!-- <div class="h-link">
<a <a
href="javascript:void(0)" href="javascript:void(0)"
@click="to(item)" @click="to(item)"
@ -34,7 +34,7 @@
<span v-if="!item.icon"> {{ item.text }}</span> <span v-if="!item.icon"> {{ item.text }}</span>
<i v-else :class="item.icon"></i> <i v-else :class="item.icon"></i>
</a> </a>
</div> </div> -->
</div> </div>
<div class="header-info"> <div class="header-info">
<div class="h-link"> <div class="h-link">

@ -1,6 +1,6 @@
<template> <template>
<div class="login-container"> <div class="login-container">
<div class="project-name">VOL开发框架,Vue3版本</div> <div class="project-name">云息数采系统</div>
<div class="login-form"> <div class="login-form">
<div class="form-user" @keypress="loginPress"> <div class="form-user" @keypress="loginPress">
<div class="login-text"> <div class="login-text">
@ -36,7 +36,7 @@
</div> </div>
<!-- 账号信息 --> <!-- 账号信息 -->
<div class="account-info"> <!-- <div class="account-info">
<p>演示账号admin666 &nbsp; &nbsp;密码:123456</p> <p>演示账号admin666 &nbsp; &nbsp;密码:123456</p>
<p>本地账号admin &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;密码:123456</p> <p>本地账号admin &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;密码:123456</p>
<p><a href="https://jq.qq.com/?_wv=1027&k=Sqstuy0M" style="text-decoration: none" <p><a href="https://jq.qq.com/?_wv=1027&k=Sqstuy0M" style="text-decoration: none"
@ -44,9 +44,9 @@
&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp;
<a href="http://v2.volcore.xyz/document/guide" style="text-decoration: none" target="_blank">框架文档</a> <a href="http://v2.volcore.xyz/document/guide" style="text-decoration: none" target="_blank">框架文档</a>
</p> </p>
</div> </div> -->
<!-- 链接位置 --> <!-- 链接位置 -->
<div class="app-link" > <!-- <div class="app-link" >
<a href="#" style="text-decoration: none">移动端扫码</a> <a href="#" style="text-decoration: none">移动端扫码</a>
<a> <a>
<i class="el-icon-chat-dot-round"></i> 小程序 <i class="el-icon-chat-dot-round"></i> 小程序
@ -59,11 +59,11 @@
<i class="el-icon-document"></i> <i class="el-icon-document"></i>
H5 H5
<img src="https://app-1256993465.cos.ap-nanjing.myqcloud.com/H5.png" /></a> <img src="https://app-1256993465.cos.ap-nanjing.myqcloud.com/H5.png" /></a>
</div> </div> -->
</div> </div>
<!-- 页面底部 --> <!-- 页面底部 -->
<div class="login-footer"> <!-- <div class="login-footer">
<a style="text-decoration: none" href="https://beian.miit.gov.cn/" target="_blank">京ICP备19056538号-1</a> <a style="text-decoration: none" href="https://beian.miit.gov.cn/" target="_blank">京ICP备19056538号-1</a>
@ -71,8 +71,7 @@
<a href="https://space.bilibili.com/525836469" style="text-decoration: none" target="blank">NET视频教程(微软MVP-ACE录制)</a> <a href="https://space.bilibili.com/525836469" style="text-decoration: none" target="blank">NET视频教程(微软MVP-ACE录制)</a>
<a href="https://www.cctalk.com/m/group/90268531" style="text-decoration: none" target="blank">VOL框架视频</a> <a href="https://www.cctalk.com/m/group/90268531" style="text-decoration: none" target="blank">VOL框架视频</a>
<a href="http://120.48.115.252:9990" style="text-decoration: none" target="blank">视频演示地址</a> <a href="http://120.48.115.252:9990" style="text-decoration: none" target="blank">视频演示地址</a>
</div> </div> -->
<img class="login-bg" src="/static/login_bg.png" /> <img class="login-bg" src="/static/login_bg.png" />
</div> </div>
</template> </template>

Loading…
Cancel
Save