fix

virgo.wzfrontend/console/src/components/show/progressBar.vue

@@ -0,0 +1,85 @@
+<template>
+	<div class="progress-bar color-font" :style="'--percent:'+percent+';'">
+		<svg class="progress-circle">
+			<circle stroke="var(--inactive-color)"
+				style="stroke-dasharray: calc(3.1415 * var(--r) * (360 - 120) / 180),calc(3.1415 * var(--r) * 120 / 180)" />
+			<circle stroke="var(--color)"
+				style="stroke-dasharray: calc(3.1415 * var(--r) * var(--percent) * var(--active-degree) / 180 / 100), 1000" />
+		</svg>
+		<div class="progress-label">
+			<span class="alibaba number">{{percent}}</span><span class="unit">%</span>
+		</div>
+	</div>
+</template>
+<script>
+	export default {
+		props: ['percent', 'title'],
+		data() {
+			return {};
+		},
+		created() {},
+		methods: {}
+	};
+</script>
+
+<style lang="scss">
+	.progress-bar {
+		width: 70px;
+		position: relative;
+
+		.progress-label {
+			display: flex;
+			align-items: center;
+			position: absolute;
+			left: 0;
+			width: 100%;
+			bottom: 30px;
+			justify-content: center;
+
+			.number {
+				font-size: 14px;
+			}
+
+			.unit {
+				opacity: 0.6;
+				font-size: 7px;
+				font-weight: 500;
+				line-height: 10px;
+			}
+		}
+
+		/* 百分数 */
+		--percent: 100;
+		/* 尺寸大小 */
+		--size: 70px;
+		/* 环形宽度（粗细） */
+		--border-width: 6px;
+		/* 主色 */
+		--color: #6FF2F0;
+		/* 辅助色 */
+		--inactive-color: #283040;
+		--r: calc((var(--size) - var(--border-width)) / 2);
+		--gap-degree: 120;
+		--active-degree: calc(360 - var(--gap-degree));
+
+		.progress-circle {
+			width: var(--size);
+			height: var(--size);
+			transform: rotate(-90deg);
+			border-radius: 50%;
+
+		}
+
+		circle {
+			cx: calc(var(--size) / 2);
+			cy: calc(var(--size) / 2);
+			r: calc((var(--size) - var(--border-width)) / 2);
+			fill: none;
+			stroke-width: var(--border-width);
+			stroke-linecap: round;
+			transition: stroke-dasharray 0.4s linear, stroke .3s;
+			transform: rotate(calc((var(--gap-degree) + (360 - var(--gap-degree)) / 2) * 1deg));
+			transform-origin: center;
+		}
+	}
+</style>

virgo.wzfrontend/console/src/layout/website.vue

@@ -0,0 +1,135 @@
+<template>
+	<div class="website-layout">
+		<div class="layout-title">
+			<div class="title-box">
+				<div class="title-logo">
+					<img src="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/3156449b8a1a4874981b2a76d5947721"
+						alt="logo.png">
+					<div class="title-label">
+						<div class="title-name">有极智慧园区</div>
+						<div class="title-sub-name">SMART PARK SYSTEM</div>
+					</div>
+					<div class="location">
+						<i class="el-icon-location"></i>
+						<span class="location-name">上海</span>
+					</div>
+				</div>
+				<div class="login">
+					<div class="login-icon">
+						<i class="el-icon-s-custom"></i>
+					</div>
+					<span class="login-name">登录 / 注册</span>
+				</div>
+			</div>
+		</div>
+		<transition name="slide-fade">
+			<router-view :key="key" />
+		</transition>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {}
+		},
+		computed: {
+			key() {
+				return this.$route.path;
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.website-layout {
+		width: 100%;
+		height: 100%;
+
+		.layout-title {
+			position: fixed;
+			top: 0;
+			left: 0;
+			right: 0;
+			height: 100px;
+			color: #fff;
+
+			.title-box {
+				width: 100%;
+				height: 100%;
+				max-width: 1200px;
+				margin: 0 auto;
+				padding: 0 20px;
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+			}
+
+			.title-logo {
+				display: flex;
+				align-items: center;
+
+				img {
+					width: 50px;
+					height: 50px;
+					border-radius: 4px;
+					margin-right: 10px;
+				}
+
+				.title-label {
+					width: 130px;
+				}
+
+				.title-name {
+					font-size: 16px;
+					line-height: 22px;
+					font-weight: 500;
+				}
+
+				.title-sub-name {
+					font-size: 12px;
+					transform: scale(.68) translateX(-28px);
+					opacity: .75;
+				}
+
+				.location {
+					border: 2px solid #fff;
+					border-radius: 26px;
+					height: 26px;
+					padding: 0 10px;
+					display: flex;
+					align-items: center;
+					cursor: pointer;
+				}
+
+				.location-name {
+					font-size: 12px;
+				}
+			}
+
+			.login {
+				display: flex;
+				align-items: center;
+
+				.login-icon {
+					width: 32px;
+					height: 32px;
+					border: 2px solid #fff;
+					border-radius: 32px;
+					text-align: center;
+					line-height: 32px;
+					margin-right: 10px;
+
+					.el-icon-s-custom {
+						font-size: 20px;
+					}
+				}
+
+				.login-name {
+					cursor: pointer;
+					font-weight: 500;
+				}
+			}
+		}
+	}
+</style>

virgo.wzfrontend/console/src/router/index.js

@@ -3,6 +3,7 @@ import Router from 'vue-router'
 import workRouter from './work'
 import showRouter from './show'
 import loginRouter from './loginRegister'
+import websiteRouter from './website'
 
 Vue.use(Router)
 const originalPush = Router.prototype.push;
@@ -10,7 +11,7 @@ Router.prototype.push = function push(location) {
 	return originalPush.call(this, location).catch(err => err);
 };
 export default new Router({
-	routes: [showRouter, workRouter, loginRouter, { //404
+	routes: [showRouter, workRouter, loginRouter, websiteRouter, { //404
 			path: '/404',
 			component: () => import('@/views/error/404'),
 		},

virgo.wzfrontend/console/src/router/website.js

@@ -0,0 +1,14 @@
+import Layout from '@/layout/website'
+const websiteRouter = {
+	path: '/website',
+	component: Layout,
+	children: [{
+		path: 'home',
+		component: () => import('@/views/website/home'),
+		name: '房源首页',
+		meta: {
+			title: '房源首页'
+		}
+	}]
+}
+export default websiteRouter;

virgo.wzfrontend/console/src/uitls/permission.js

@@ -14,7 +14,7 @@ NProgress.configure({
 	showSpinner: false
 })
 const baseUrl = ['/', '/401', '/404', '/loginRegister/login', '/work', '/message', '/space/project',
-	'/iot/device/detail','/work/system/main'
+	'/iot/device/detail', '/work/system/main', '/website/home'
 ];
 
 const testBaseUrl = (path) => { //判断公共路由

virgo.wzfrontend/console/src/views/show/index.vue

@@ -4,13 +4,13 @@
 			<nav class="chart-top">
 				<div class="title">
 					<div class="title-left">
-						<span class="organization-name">智慧数字工地</span>
+						<span class="organization-name">智慧数字项目</span>
 						<i class="iconfont huifont-duoyunzhuanqing"></i>
 						<span class="wather-label">多云转晴</span>
 						<span class="wather-value alibaba">18～26</span>
 						<span class="wather-unit">℃</span>
 					</div>
-					<span class="big-title pangmenzhengdao">AI智慧物业</span>
+					<span class="big-title pangmenzhengdao">AI智慧园区</span>
 					<div class="title-right">
 						<span class="date alibaba">{{date}}</span>
 						<span class="time alibaba">{{time}}</span>
@@ -24,12 +24,15 @@
 			<div class="img-box">
 				<img src="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/782a1b2730864af58b4f0cd76c53bb4f"
 					alt="bg.jpeg" />
-			</div>
+			</div>
+		<!-- 	<div class="chart-tops">
+				<page-data type="top"></page-data>
+			</div> -->
 			<div class="chart-left">
 				<page-data type="left"></page-data>
 			</div>
-			<div class="chart-right">
-				<page-data type="right"></page-data>
+			<div class="chart-right">
+				<page-data type="right"></page-data>
 			</div>
 		</div>
 	</div>
@@ -79,266 +82,4 @@
 
 <style lang="scss">
 	@import '../../assets/scss/datav.scss';
-
-	.datav-box {
-		position: relative;
-		width: 100%;
-		height: 100%;
-		overflow: hidden;
-		background: #0E1626 center top;
-
-		.chart-title {
-			width: 440px;
-			height: 40px;
-			background: url(../../assets/image/common/sub_title.png) no-repeat;
-			background-size: 100% 100%;
-			font-weight: 600;
-			line-height: 40px;
-			padding-left: 44px;
-			font-size: 16px;
-		}
-
-		.chart-top {
-			position: fixed;
-			top: 0;
-			left: 0;
-			right: 0;
-			background: linear-gradient(0deg, rgba(12, 15, 22, 0) 0%, rgba(12, 15, 22, 0.12) 13%, rgba(12, 15, 22, 0.65) 45%, rgba(12, 15, 22, 0.86) 64%, #0C0F16 100%);
-			z-index: 9;
-		}
-
-		.chart-top-option {
-			position: fixed;
-			left: 530px;
-			right: 530px;
-			top: 120px;
-		}
-
-		.chart-top-options {
-			display: flex;
-			justify-content: center;
-		}
-
-		.chart-left {
-			position: fixed;
-			z-index: 8;
-			top: 0;
-			left: 0;
-			bottom: 0;
-			width: 545px;
-			background: linear-gradient(270deg, rgba(3, 4, 7, 0) 0%, rgba(6, 8, 12, 0.35) 15%, rgba(9, 12, 17, 0.45) 30%, rgba(9, 12, 17, 0.69) 50%, #0C0F16 100%);
-			padding: 140px 65px 20px 40px;
-			font-size: 14px;
-		}
-
-		.chart-right {
-			position: fixed;
-			z-index: 8;
-			top: 0;
-			right: 0;
-			bottom: 0;
-			width: 545px;
-			background: linear-gradient(90deg, rgba(3, 4, 7, 0) 0%, rgba(6, 8, 12, 0.35) 15%, rgba(9, 12, 17, 0.45) 30%, rgba(9, 12, 17, 0.69) 50%, #0C0F16 100%);
-			padding: 140px 40px 20px 65px;
-			font-size: 14px;
-		}
-
-		.chart-bottom {
-			position: fixed;
-			top: 814px;
-			left: 507px;
-			right: 507px;
-		}
-
-		.chart-bottom .chart-title {
-			width: 100%;
-			background-size: contain;
-			position: relative;
-		}
-
-		.chart-bottom .chart-title::before {
-			content: '';
-			position: absolute;
-			height: 2px;
-			left: 419px;
-			right: 0;
-			border-bottom: 2px solid;
-			border-image: linear-gradient(315deg, rgba(167, 208, 255, 0), rgba(110, 163, 255, 0.3)) 2 2;
-			bottom: 0.5px;
-		}
-
-		.chart-bottoms {
-			position: fixed;
-			top: 825px;
-			left: 507px;
-			right: 40px;
-			z-index: 19;
-			font-size: 14px;
-		}
-
-		.chart-bottoms .chart-title {
-			width: 100%;
-			background-size: contain;
-			position: relative;
-		}
-
-		.chart-bottoms .chart-title::before {
-			content: '';
-			position: absolute;
-			height: 2px;
-			left: 419px;
-			right: 0;
-			border-bottom: 2px solid;
-			border-image: linear-gradient(315deg, rgba(167, 208, 255, 0), rgba(110, 163, 255, 0.3)) 2 2;
-			bottom: 0.5px;
-		}
-
-		.side-data-box,
-		.top-bottom-data {
-			width: 100%;
-			height: 100%;
-		}
-
-		.side-data {
-			width: 100%;
-			height: 100%;
-			display: flex;
-			flex-direction: column;
-		}
-
-		.img-box {
-			width: 100%;
-			height: 1080px;
-			overflow: hidden;
-
-			img {
-				width: 100%;
-			}
-		}
-
-		.chart-left,
-		.chart-right {
-			padding-top: 85px !important;
-		}
-
-		/* title start */
-		.title {
-			height: 105px;
-			background-image: url(../../assets/image/common/title.png);
-			background-size: 100% 100%;
-			text-align: center;
-			padding-top: 14px;
-			position: relative;
-		}
-
-		.title .big-title {
-			font-size: 40px;
-			color: #FFFFFF;
-			line-height: 46px;
-			letter-spacing: 6px;
-			text-shadow: 0px 2px 10px rgba(2, 2, 22, 0.1), 0px 0px 8px rgba(255, 255, 255, 0.1);
-			background: linear-gradient(180deg, #FFFFFF 0%, #C7D6FF 100%);
-			-webkit-background-clip: text;
-			-webkit-text-fill-color: transparent;
-			z-index: 9;
-			position: relative;
-		}
-
-		.title .title-left {
-			position: absolute;
-			left: 38px;
-			top: 14px;
-			height: 27px;
-			display: flex;
-			align-items: center;
-			letter-spacing: 1px;
-		}
-
-		.title .organization-name {
-			font-weight: 600;
-			margin-right: 47px;
-		}
-
-		.title .title-left .iconfont {
-			font-size: 24px;
-			margin-right: 8px;
-		}
-
-		.title .wather-label {
-			margin-right: 18px;
-		}
-
-		.title .wather-value {
-			font-size: 20px;
-			margin-right: 3px;
-		}
-
-		.title .title-right {
-			position: absolute;
-			right: 38px;
-			top: 14px;
-			height: 27px;
-			display: flex;
-			align-items: center;
-			letter-spacing: 1px;
-		}
-
-		.title .date {
-			font-size: 18px;
-			margin-right: 16px;
-		}
-
-		.title .time {
-			font-size: 18px;
-			margin-right: 48px;
-		}
-
-		.title .title-right .iconfont {
-			font-size: 20px;
-		}
-
-		.title .admin-system {
-			display: flex;
-			align-items: center;
-			font-size: 14px;
-			cursor: pointer;
-		}
-
-		.title .admin-system:hover {
-			color: #3371FF;
-		}
-
-		.menu-list {
-			display: flex;
-			justify-content: space-between;
-			padding: 0 25px;
-			position: absolute;
-			top: 76px;
-			width: 100%;
-		}
-
-		.menu-item-box {
-			display: flex;
-		}
-
-		.menu-list .menu-item {
-			width: 135px;
-			height: 40px;
-			font-size: 20px;
-			color: #AAB5C7;
-			line-height: 38px;
-			letter-spacing: 2px;
-			text-align: center;
-			background-image: url(../../assets/image/common/tab.png);
-			background-size: 100% 100%;
-			margin: 0 15px;
-			cursor: pointer;
-		}
-
-		.menu-list .menu-item.active,
-		.menu-list .menu-item:hover {
-			color: #fff;
-			background-image: url(../../assets/image/common/tab_active.png);
-		}
-	}
 </style>

virgo.wzfrontend/console/src/views/website/home.vue

@@ -0,0 +1,142 @@
+<template>
+	<div class="website-home">
+		<div class="main">
+			<div class="container">
+				<div class="main-title">有极-寻找合适的房源</div>
+				<div class="main-sub-title">方便、快捷、精准</div>
+				<div class="main-input">
+					<input type="text" placeholder="请输入房源名称或项目名称" />
+					<div class="main-input-button">
+						<i class="el-icon-search"></i>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="container high-seas">
+			<div class="title">公海房源</div>
+			<div class="house-list">
+				<div class="house-item">
+					<img src="https://img0.baidu.com/it/u=3837888269,660016232&fm=253&fmt=auto&app=138&f=JPEG?w=1067&h=800"
+						alt="滨湖万丽南排小高，耳朵户型凤凰层" />
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+</script>
+
+<style lang="scss">
+	.website-home {
+		.container {
+			width: 100%;
+			max-width: 1200px;
+			margin: 0 auto;
+			padding: 0 20px;
+		}
+
+		.main {
+			height: 600px;
+			background: url(https://file-node.oss-cn-shanghai.aliyuncs.com/youji/5ea8dc9317c643d0b0254d8d13a154f3);
+			background-repeat: no-repeat;
+			background-size: 100% 100%;
+			color: #fff;
+			padding-top: 100px;
+			box-sizing: border-box;
+
+			.main-title {
+				font-weight: 500;
+				font-size: 36px;
+				line-height: 50px;
+				margin-bottom: 12px;
+			}
+
+			.main-sub-title {
+				font-weight: 300;
+				font-size: 20px;
+				line-height: 28px;
+				opacity: .7;
+				margin-bottom: 50px;
+			}
+
+			.main-input {
+				display: flex;
+
+				input {
+					width: 400px;
+					height: 50px;
+					padding: 0 20px;
+					border-radius: 6px 0 0 6px;
+					font-size: 16px;
+				}
+
+				.main-input-button {
+					width: 76px;
+					text-align: center;
+					height: 50px;
+					line-height: 50px;
+					background: $--color-primary;
+					color: #fff;
+					border-radius: 0 6px 6px 0;
+					font-size: 22px;
+					cursor: pointer;
+
+					&:hover {
+						opacity: 0.7;
+					}
+				}
+			}
+
+			.container {
+				width: 100%;
+				height: 100%;
+				max-width: 1200px;
+				margin: 0 auto;
+				padding: 0 20px;
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+			}
+		}
+
+		.high-seas {
+			color: #191919;
+			margin-top: 80px;
+
+			.title {
+				font-size: 36px;
+				line-height: 50px;
+				font-weight: 600;
+				margin-bottom: 30px;
+			}
+
+			.house-list {
+				display: flex;
+
+				.house-item {
+					width: 265px;
+					background: #fff;
+					border-radius: 8px;
+					box-sizing: border-box;
+					position: relative;
+					margin-bottom: 15px;
+					cursor: pointer;
+
+					&:hover {
+						box-shadow: 0px 1px 12px rgba(3, 3, 3, 0.08);
+					}
+
+					img {
+						border-radius: 4px;
+						width: 265px;
+						height: 205px;
+						border: 0;
+						vertical-align: top;
+					}
+				}
+			}
+
+		}
+	}
+</style>