新增弹幕

2021-12-10 10:06:19 +08:00 · 2021-12-10 10:06:19 +08:00 · 3e5e948a3d
parent 9a5a4572c6
commit 3e5e948a3d
24 changed files with 1089 additions and 71 deletions
--- a/css/base.css
+++ b/css/base.css
@ -49,13 +49,14 @@ img {
 	display: block;
 	object-fit: cover;
 	width: 100%;
+	box-sizing: border-box;
 }
 /* 去掉a标签的下划线，并修改字体颜色 */
 a {
 	color: #666;
 	text-decoration: none;
 	/* 手机端去除a标签点击时的背景样式 */
-	-webkit-tap-highlight-color: transparent;
+	/* -webkit-tap-highlight-color: transparent; */
 	/* 去除边距 */
 	display: inline-block;
 }
--- a/css/style.css
+++ b/css/style.css
@ -45,9 +45,26 @@
 }
 /* 导航 end */
 .footer {
+	position: fixed;
+	bottom: 0px;
 	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	background-color: #fff;
+	padding: 15px 45px 6px 45px;
+	box-shadow: 0px -3px 10px rgba(178, 45, 42,.5);
+}
+.footer a {
+	width: 55px;
+	height: 50px;
+	object-fit: inherit;
+	position: relative;
+}
+.footer a:nth-child(2){
+	width: 110px;
+	height: 110px;
+	margin-top: -65px;
 }
-
 .introduce-box {
 	position: relative;
 }
@ -73,18 +90,195 @@
 	background: url(../imgs/public/foot-img.png) no-repeat;
 	background-size: 100% 100%;
 	padding: 20px;
+	padding-bottom: 71px;
 }
 .huigu-box {
 	background-color: #fff;
 	border-radius: 10px;
-	padding: 20px 10px 16px 10px;
+	padding: 20px 15px 16px 15px;
 	box-shadow: 0px 0px 10px rgba(0,0,0,.4);
 	color: #b22f2c;
+	margin-bottom: 40px;
 }
 .huigu-box p {
 	font-size: 1rem;
+	text-align: center;
+}
+.video-box {
+	height: 10rem;
+	margin: 15px 0px;
+	position: relative;
+	overflow: hidden;
+	border-radius: 12px;
+}
+.cover-img {
+	object-fit: contain;
+}
+.play-img {
+	width: 65px;
+	height: 65px;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%,-50%);
 }
 .huigu-box span {
 	font-size: 0.75rem;
 	font-weight: bold;
 }
+.video-play-box {
+	position: fixed;
+	top: 0px;
+	left: 0px;
+	right: 0px;
+	bottom: 0px;
+	z-index: 1;
+	display: none;
+	justify-content: center;
+	align-items: center;
+	flex-direction: column;
+	background-color: rgba(0,0,0,.5);
+	padding: 0 20px;
+}
+.video-play-box img {
+	width: 50px;
+	height: 50px;
+	margin-top: 20px;
+}
+.info-box {
+	position: fixed;
+	top: 100%;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	background-color: rgba(255,255,255,1);
+	z-index: 2;
+	padding: 20px;
+	transition: all .5s ease-in-out;
+	color: #000000;
+	overflow: hidden;
+	overflow-y: scroll;
+	padding-bottom: 84px;
+	font-size: 14px;
+}
+.info-box h1{
+	color: #b22f2c!important;
+}
+.taskBox {
+	top: 0!important;
+}
+.close-box {
+	position: absolute;
+	bottom: 0px;
+	left: 0px;
+	right: 0px;
+	padding: 20px;
+	background-color: #FFFFFF;
+	transition: all .5s ease-in-out;
+}
+.btn-close {
+	position: fixed;
+}
+.close-box div {
+	padding: 10px;
+	text-align: center;
+	background-color: rgba(178, 45, 42,1);
+	color: #fff;
+	border-radius: 6px;
+	font-size: 16px;
+}
+
+/* 寄语 */
+.box-content {
+	background: url(../imgs/public/massage-icon.png) no-repeat;
+	background-size: 100% 100%;
+	background-attachment:fixed;
+	padding-bottom: 50px;
+	position: relative;
+	height: 100vh;
+}
+.bao-box {
+	position: fixed;
+	top: 200px;
+	bottom: 71px;
+	overflow: hidden;
+	overflow-y: scroll;
+}
+.massage-slide {
+	height: 190px;
+	overflow: hidden;
+	position: relative;
+}
+.item-slide {
+	display: inline-flex;
+	align-items: center;
+	background-color: rgba(255,255,255,.5);
+	padding: 4px;
+	border-radius: 50px;
+	color: #FFFFFF;
+	font-size: 14px;
+	font-weight: bold;
+	margin-bottom: 10px;
+}
+.massage-slide img {
+	width: 30px;
+	height: 30px;
+	border-radius: 100%;
+}
+
+.massage-box {
+	background-color: #FFFFFF;
+	position: fixed;
+	bottom: 40px;
+	left: 30px;
+	right: 30px;
+	padding: 15px;
+	border-radius: 4px;
+	display: none;
+	
+}
+.massage-box ul {
+	display: flex;
+	flex-wrap: wrap;
+	max-height: 200px;
+	overflow: hidden;
+	overflow-y: scroll;
+	padding-bottom: 50px;
+}
+.massage-box ul li {
+	display: inline-flex;
+	padding: 4px 10px;
+	border-radius: 50px;
+	color: #b22f2c;
+	border: 1px solid #b22f2c;
+	margin-bottom: 6px;
+	font-weight: bold;
+	font-size: 12px;
+}
+.massage-box ul .itemActive {
+	background-color: #b22f2c;
+	color: #FFFFFF;
+}
+.massage-box span {
+	margin-right: 6px;
+}
+.fun-box {
+	position: fixed;
+	right: 15px;
+	bottom: 130px;
+	width: 100px;
+	height: 100px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+.fun-box img {
+	width: 100px;
+	height: 100px;
+	margin-top: -30px;
+}
+.send-img {
+	width: 50px!important;
+	height: 50px!important;
+	display: none;
+}
--- a/css/wall.css
+++ b/css/wall.css
@ -0,0 +1,501 @@
+/*-----------------------------------------*/
+/****************公用样式*******************/
+/*-----------------------------------------*/
+.clear-both::after {
+	clear: both;
+	content: ".";
+	display: block;
+	visibility: hidden;
+	height: 0;
+}
+
+.lf {
+	float: left;
+}
+
+.rt {
+	float: right;
+}
+
+.transition {
+	-webkit-transition: all .5s ease;
+	-o-transition: all .5s ease;
+	-moz-transition: all .5s ease;
+	transition: all .5s ease;
+}
+
+.transform-scale {
+	-webkit-transform: scale(1);
+	-moz-transform: scale(1);
+	-ms-transform: scale(1);
+	transform: scale(1);
+}
+
+.hover-transform-scale {
+	-webkit-transform: scale(1.05);
+	-moz-transform: scale(1.05);
+	-ms-transform: scale(1.05);
+	transform: scale(1.05);
+}
+
+.ellipsis {
+	display: block;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	vertical-align: middle;
+}
+
+.text-ban {
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	-khtml-user-select: none;
+	user-select: none;
+}
+
+.track-list {
+	scrollbar-face-color: #c7c7c7;
+	scrollbar-highlight-color: #c7c7c7;
+	scrollbar-3dlight-color: #c7c7c7;
+	scrollbar-darkshadow-color: #c7c7c7;
+	scrollbar-Shadow-color: #c7c7c7;
+	scrollbar-arrow-color: #c7c7c7;
+	scrollbar-track-color: #ebebeb;
+}
+
+.track-list::-webkit-scrollbar {
+	width: 7px;
+	height: 9px;
+}
+
+.track-list::-webkit-scrollbar-button:end:increment,
+.track-list::-webkit-scrollbar-button:start:decrement {
+	display: block;
+	height: 0;
+	background-color: transparent;
+}
+
+.track-list::-webkit-scrollbar-track-piece {
+	-webkit-border-radius: 0;
+	-webkit-border-bottom-right-radius: 4px;
+	-webkit-border-bottom-left-radius: 4px;
+	background: #ebebeb;
+}
+
+.track-list::-webkit-scrollbar-thumb:vertical {
+	height: 50px;
+	background-color: rgba(0, 0, 0, 0.4);
+	-webkit-border-radius: 4px;
+}
+
+.track-list::-webkit-scrollbar-thumb:horizontal {
+	width: 50px;
+	background-color: rgba(0, 0, 0, 0.2);
+	-webkit-border-radius: 4px;
+}
+
+/*-----------------------------------------*/
+/****************元素样式*******************/
+/*-----------------------------------------*/
+/* 防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体 */
+html {
+	color: #fff;
+	-webkit-text-size-adjust: 100%;
+	-ms-text-size-adjust: 100%;
+	background: #eff3f5;
+	background: -webkit-linear-gradient(left, #f6ad36, #cf5a5d);
+	/* Safari 5.1 - 6.0 */
+	background: -o-linear-gradient(right, #f6ad36, #cf5a5d);
+	/* Opera 11.1 - 12.0 */
+	background: -moz-linear-gradient(right, #f6ad36, #cf5a5d);
+	/* Firefox 3.6 - 15 */
+	background: linear-gradient(to right, #f6ad36, #cf5a5d);
+	/* 标准的语法 */
+}
+
+/** 清除内外边距 **/
+body,
+div,
+dl,
+dt,
+dd,
+ul,
+ol,
+li,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+pre,
+code,
+form,
+fieldset,
+legend,
+input,
+textarea,
+p,
+blockquote,
+th,
+td,
+hr,
+button,
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+	margin: 0;
+	padding: 0;
+}
+
+/* 重设 HTML5 标签, IE 需要在 js 中 createElement(TAG) */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+	display: block;
+}
+
+/* HTML5 媒体文件跟 img 保持一致 */
+audio,
+canvas,
+video {
+	display: inline-block;
+	*display: inline;
+	*zoom: 1;
+}
+
+/* 要注意表单元素并不继承父级 font 的问题 */
+input,
+select,
+textarea {
+	font-size: 100%;
+}
+
+/* 去掉各 table cell 的边距并让其边重合 */
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+/* IE bug fixed: th 不继承 text-align */
+th {
+	text-align: inherit;
+}
+
+/* 去除默认边框 */
+fieldset,
+img {
+	border: 0;
+}
+
+/* ie6 7 8(q) bug 显示为行内表现 */
+iframe {
+	display: block;
+}
+
+/* 去掉 firefox 下此元素的边框 */
+abbr,
+acronym {
+	border: 0;
+	font-variant: normal;
+}
+
+/* 一致的 del 样式 */
+del {
+	text-decoration: line-through;
+}
+
+i {
+	font-style: normal;
+}
+
+address,
+caption,
+cite,
+code,
+dfn,
+em,
+th,
+var {
+	font-style: normal;
+	font-weight: 500;
+}
+
+/* 对齐是排版最重要的因素, 别让什么都居中 */
+caption,
+th {
+	text-align: left;
+}
+
+/* 来自yahoo, 让标题都自定义, 适应多个系统应用 */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	font-size: 100%;
+	font-weight: 500;
+}
+
+h1 {
+	font-size: 24px;
+}
+
+h2 {
+	font-size: 16px;
+}
+
+h3,
+h4,
+h5,
+h6 {
+	font-size: 14px;
+}
+
+/* 解决ie下重复最后字符 */
+q:before,
+q:after {
+	content: '';
+}
+
+/* 统一上标和下标 */
+sub,
+sup {
+	position: relative;
+	font-size: 75%;
+	line-height: 0;
+	vertical-align: baseline;
+}
+
+sup {
+	top: -0.5em;
+}
+
+sub {
+	bottom: -0.25em;
+}
+
+/* 默认不显示下划线，保持页面简洁 */
+ins,
+a {
+	text-decoration: none;
+}
+
+/** 设置默认字体 **/
+body,
+button,
+input,
+select,
+textarea {
+	font: 14px helvetica neue, arial, hiragino sans gb, microsoft yahei, sans-serif;
+}
+
+address,
+cite,
+dfn,
+em,
+var {
+	font-style: normal;
+}
+
+/* 将斜体扶正 */
+code,
+kbd,
+pre,
+samp {
+	font-family: courier new, courier, monospace;
+}
+
+/* 统一等宽字体 */
+small {
+	font-size: 12px;
+}
+
+/* 小于 12px 的中文很难阅读，让 small 正常化 */
+/** 重置列表元素 **/
+ul,
+ol {
+	list-style: none;
+}
+
+/** 重置文本格式元素 **/
+a {
+	text-decoration: none;
+	cursor: pointer;
+	color: #333;
+	-webkit-transition: all .5s ease;
+	-o-transition: all .5s ease;
+	-moz-transition: all .5s ease;
+	transition: all .5s ease;
+}
+
+a:hover {
+	color: #9ebee7;
+}
+
+/** 清除选中状态蓝色边框 **/
+a,
+img,
+input,
+select,
+textarea {
+	outline: none;
+	border: none;
+}
+
+/** 定义布局方式 **/
+* {
+	box-sizing: border-box;
+}
+
+input[type=submit] {
+	-webkit-appearance: none;
+}
+
+/**************************/
+/********页面样式**********/
+/**************************/
+html,
+body {
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+}
+
+body {
+	min-width: 1000px;
+	margin: 0 auto;
+}
+
+.container {
+	position: fixed;
+	top: 200px;
+	left: 0;
+	width: 100%;
+}
+
+/*输入框的样式*/
+.input-box {
+	position: absolute;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	height: 100px;
+	padding: 30px;
+	color: #fff;
+	background: rgba(0, 0, 0, .6);
+	text-align: center;
+}
+
+.input-box input {
+	width: 320px;
+	height: 40px;
+	padding: 0 10px;
+	font-size: 16px;
+	border-radius: 10px;
+	color: #333;
+	-webkit-transition: all .5s;
+	-moz-transition: all .5s;
+	-ms-transition: all .5s;
+	-o-transition: all .5s;
+	transition: all .5s;
+}
+
+.input-box input:focus {
+	box-shadow: 3px 5px 20px rgba(0, 0, 0, .8), 2px 1px 3px rgba(0, 0, 0, .6) inset;
+}
+
+.input-box .btn {
+	width: 100px;
+	height: 40px;
+	line-height: 40px;
+	margin-left: 10px;
+	border-radius: 10px;
+	font-size: 16px;
+	font-weight: bold;
+	color: #fff;
+	background: #cf5a5d;
+	background: -webkit-linear-gradient(left, #f6ad36, #cf5a5d);
+	/* Safari 5.1 - 6.0 */
+	background: -o-linear-gradient(right, #f6ad36, #cf5a5d);
+	/* Opera 11.1 - 12.0 */
+	background: -moz-linear-gradient(right, #f6ad36, #cf5a5d);
+	/* Firefox 3.6 - 15 */
+	background: linear-gradient(to right, #f6ad36, #cf5a5d);
+	border: 0;
+	outline: none;
+	cursor: pointer;
+	-webkit-transition: all .5s;
+	-moz-transition: all .5s;
+	-ms-transition: all .5s;
+	-o-transition: all .5s;
+	transition: all .5s;
+}
+
+.input-box .btn:hover {
+	box-shadow: 3px 5px 20px rgba(0, 0, 0, .8), 2px 1px 3px rgba(255, 255, 255, .6) inset;
+}
+
+/*此处为每条弹幕的样式*/
+.container .list {
+	position: absolute;
+	left: 100%;
+	white-space: nowrap;
+	color: #fff;
+	text-shadow: 0 0 3px #000;
+	-webkit-transition: -webkit-transform 25s linear;
+	-moz-transition: -moz-transform 25s linear;
+	-o-transition: -o-transform 25s linear;
+	transition: transform 25s linear;
+	z-index: 999;
+	display: inline-flex;
+	align-items: center;
+	background-color: rgba(255,255,255,.5);
+	padding: 4px 6px;
+	border-radius: 50px;
+	color: #FFFFFF;
+	font-size: 14px;
+	font-weight: 900;
+	margin-bottom: 10px;
+	letter-spacing: 3px;
+}
+
+/*此处弹幕的移动动画，使用transform不会引起页面的重绘，性能更好*/
+.container .list.animate {
+	-webkit-transform: translateX(-3420px);
+	-moz-transform: translateX(-3420px);
+	-ms-transform: translateX(-3420px);
+	-o-transform: translateX(-3420px);
+	transform: translateX(-3420px);
+}
+
+.container .list .content {
+	display: inline-block;
+	opacity: 1;
+}
+
+.container .list img {
+	width: 24px;
+	height: 24px;
+	margin-right: 5px;
+	border-radius: 50%;
+	vertical-align: text-top;
+}
--- a/imgs/public/close-icon.png
+++ b/imgs/public/close-icon.png
--- a/imgs/public/cover-icon.png
+++ b/imgs/public/cover-icon.png
--- a/imgs/public/hear.png
+++ b/imgs/public/hear.png
--- a/imgs/public/jiyu-icon.png
+++ b/imgs/public/jiyu-icon.png
--- a/imgs/public/line-icon.png
+++ b/imgs/public/line-icon.png
--- a/imgs/public/massage-icon.png
+++ b/imgs/public/massage-icon.png
--- a/imgs/public/play-icon.png
+++ b/imgs/public/play-icon.png
--- a/imgs/public/say.png
+++ b/imgs/public/say.png
--- a/imgs/public/send-icon.png
+++ b/imgs/public/send-icon.png
--- a/imgs/public/vr-icon.png
+++ b/imgs/public/vr-icon.png
--- a/imgs/public/yinxiang-icon.png
+++ b/imgs/public/yinxiang-icon.png
--- a/imgs/secondary/1
+++ b/imgs/secondary/1
--- a/index.html
+++ b/index.html
@ -60,33 +60,7 @@
 			}
 		</script>
 	</head>
-	<body style="background-color: #b03a38;">
-		<!-- banner轮播图 -->
-		<!-- <div class="banner-swiper swiper">
-			<div class="swiper-wrapper">
-				<div class="swiper-slide">
-					<img src="imgs/secondary/banner/banner-01.png" width="100%" height="100%" alt="" onerror="this.src='./imgs/public/小桶龙.png'">
-					<h1 class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">banner-01</h1>
-				</div>
-				<div class="swiper-slide">
-					<img src="imgs/secondary/banner/banner-02.png" width="100%" height="100%" alt="" onerror="this.src='./imgs/public/小桶龙.png'">
-					<h1 class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">banner-02</h1>
-				</div>
-				<div class="swiper-slide">
-					<img src="imgs/secondary/banner/banner-03.png" width="100%" height="100%" alt="" onerror="this.src='./imgs/public/小桶龙.png'">
-					<h1 class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">banner-03</h1>
-				</div>
-				<div class="swiper-slide">
-					<img src="imgs/secondary/banner/banner-04.png" width="100%" height="100%" alt="" onerror="this.src='./imgs/public/小桶龙.png'">
-					<h1 class="ani" swiper-animate-effect="lightSpeedIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">banner-04</h1>
-				</div>
-				<div class="swiper-slide">
-					<img src="imgs/secondary/banner/banner-05.png" width="100%" height="100%" alt="" onerror="this.src='./imgs/public/小桶龙.png'">
-					<h1 class="ani" swiper-animate-effect="slideInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">banner-05</h1>
-				</div>
-			</div>
-			<div class="swiper-pagination"></div>
-		</div> -->
+	<body>
 		<!-- 主体内容 -->
 		<main class="main" style="background-color: #FFFFFF;">
 			<img src="imgs/public/head-img.png">
@ -95,23 +69,52 @@
 					<span class="clips5">
 						值金沙酒业国营元年70周年之际，以主题展形式回溯过去，透过历史的切片，展览将被尘封的人、事、物再次呈现，唤起人们对金沙历史文化底蕴的感知。以史为镜，展望未来，金沙酒业正在经历一场蜕变，而蜕变之后必将迎来胜利和荣光。
 					</span>
-					<p>>>查看详情</p>
+					<p onclick="checkInfo()">>>查看详情</p>
+					<div class="info-box">
+						<h1>金沙酒业介绍</h1>
+						值金沙酒业国营元年70周年之际，以主题展形式回溯过去，透过历史的切片，展览将被尘封的人、事、物再次呈现，唤起人们对金沙历史文化底蕴的感知。以史为镜，展望未来，金沙酒业正在经历一场蜕变，而蜕变之后必将迎来胜利和荣光。
+						值金沙酒业国营元年70周年之际，以主题展形式回溯过去，透过历史的切片，展览将被尘封的人、事、物再次呈现，唤起人们对金沙历史文化底蕴的感知。以史为镜，展望未来，金沙酒业正在经历一场蜕变，而蜕变之后必将迎来胜利和荣光。
+						值金沙酒业国营元年70周年之际，以主题展形式回溯过去，透过历史的切片，展览将被尘封的人、事、物再次呈现，唤起人们对金沙历史文化底蕴的感知。以史为镜，展望未来，金沙酒业正在经历一场蜕变，而蜕变之后必将迎来胜利和荣光。
+						值金沙酒业国营元年70周年之际，以主题展形式回溯过去，透过历史的切片，展览将被尘封的人、事、物再次呈现，唤起人们对金沙历史文化底蕴的感知。以史为镜，展望未来，金沙酒业正在经历一场蜕变，而蜕变之后必将迎来胜利和荣光。
+						值金沙酒业国营元年70周年之际，以主题展形式回溯过去，透过历史的切片，展览将被尘封的人、事、物再次呈现，唤起人们对金沙历史文化底蕴的感知。以史为镜，展望未来，金沙酒业正在经历一场蜕变，而蜕变之后必将迎来胜利和荣光。
+						值金沙酒业国营元年70周年之际，以主题展形式回溯过去，透过历史的切片，展览将被尘封的人、事、物再次呈现，唤起人们对金沙历史文化底蕴的感知。以史为镜，展望未来，金沙酒业正在经历一场蜕变，而蜕变之后必将迎来胜利和荣光。
+						值金沙酒业国营元年70周年之际，以主题展形式回溯过去，透过历史的切片，展览将被尘封的人、事、物再次呈现，唤起人们对金沙历史文化底蕴的感知。以史为镜，展望未来，金沙酒业正在经历一场蜕变，而蜕变之后必将迎来胜利和荣光。
+						值金沙酒业国营元年70周年之际，以主题展形式回溯过去，透过历史的切片，展览将被尘封的人、事、物再次呈现，唤起人们对金沙历史文化底蕴的感知。以史为镜，展望未来，金沙酒业正在经历一场蜕变，而蜕变之后必将迎来胜利和荣光。
+						值金沙酒业国营元年70周年之际，以主题展形式回溯过去，透过历史的切片，展览将被尘封的人、事、物再次呈现，唤起人们对金沙历史文化底蕴的感知。以史为镜，展望未来，金沙酒业正在经历一场蜕变，而蜕变之后必将迎来胜利和荣光。
+						<div class="close-box" onclick="closeEv()"><div>关闭</div></div>
+					</div>
 				</div>
 			</div>
 			<!-- 回顾、历程 -->
 			<div class="review-box">
 				<div class="huigu-box">
 					<p>- 金沙酒业国营元70周年献礼片 -</p>
-					<div>
-						
+					<div class="video-box">
+						<img class="cover-img" src="imgs/public/cover-icon.png" >
+						<img onclick="playVedio()" class="play-img" src="imgs/public/play-icon.png" >
+					</div>
+					<span>感恩奋进70年，致敬时代金沙人！</span>
+				</div>
+				<div class="huigu-box">
+					<p>- 金沙酒业国营元70周年献礼片 -</p>
+					<div class="video-box">
+						<img class="cover-img" src="imgs/public/cover-icon.png" >
+						<img onclick="playVedio()" class="play-img" src="imgs/public/play-icon.png" >
 					</div>
 					<span>感恩奋进70年，致敬时代金沙人！</span>
 				</div>
 			</div>
+			<!-- 视频播放 -->
+			<div class="video-play-box" id="video-box">
+				<video id="video_id" width="100%" height="360" src="" controls poster="imgs/public/cover-icon.png"></video>
+				<img onclick="closeVideo()" src="imgs/public/close-icon.png" width="30" height="30" >
+			</div>
 		</main>
 		<!-- 底部部分 -->
 		<footer class="footer">
-			
+			<a href="javascript:;"><img src="imgs/public/yinxiang-icon.png" ></a>
+			<a href="javascript:;"><img src="imgs/public/vr-icon.png" ></a>
+			<a href="pages/htmls/massage.html"><img src="imgs/public/jiyu-icon.png" ></a>
 		</footer>
 	</body>
 </html>
--- a/js/barrageWall.js
+++ b/js/barrageWall.js
@ -0,0 +1,97 @@
+var barrageWall={
+    container:null,//容器选择器
+    barrageLen:null,//弹幕的条数
+    lastElem:0,//弹幕出现的位置
+    overlapElem:-1,//如果大于0则表示每条弹幕轨道上都有弹幕未全部出现，需要重叠定位在弹幕轨道上
+    barrage:[],//弹幕墙
+    barrageOffset:[],//弹幕墙上最后一条弹幕的偏移量
+    init:function(option){
+        if(option.container===undefined){
+            console.error("必须指定 container 属性，container为弹幕容器的选择器");
+            return false;
+        }
+        if(option.barrageLen===undefined){
+            console.error("必须指定 barrageLen 属性，barrageLen为弹幕轨道的数");
+            return false;
+        }
+        this.container=option.container;
+        this.barrageLen=option.barrageLen;
+
+        for(var i=0;i<this.barrageLen;i++){//建立弹幕墙，此处的循环次数为当前页面运行的弹幕行数
+            this.barrage[i]=new Array();
+        }
+    },
+    upWall:function(img,user,txt){//弹幕上墙
+        if(!this.barrageLen&&this.container){
+            console.error("未检测到container和barrageLen属性，请先初始化弹幕墙并指定container和barrageLen属性");
+            return false;
+        }
+
+        this.positionWall();//从上至下找出每条弹幕轨道上最后一条弹幕移动的位置
+
+        var elem = $('<div></div>')//创建元素
+            .addClass('list')//添加样式
+            .css("top",this.lastElem*38+"px")//定位
+            // .html("<img src='"+img+"' alt=''/>"+user+"："+txt)//添加内容
+            .html("<img src='"+img+"' alt=''/>"+user+txt)//添加内容
+            .appendTo(this.container);//追加在父元素后面
+
+        this.barrage[this.lastElem].push(elem);//追加在数组中
+
+        setTimeout(function(){//200ms防止元素动画不执行
+            elem.addClass("animate");
+        },200);
+
+        setTimeout(function(){//25s后动画执行完毕，从数组和页面中移除
+            for(var i=0;i<this.barrage.length;i++){
+                for(var x=0;x<this.barrage[i].length;x++){
+                    if(this.barrage[i][x]===elem){
+                        this.barrage[i].splice(x,1);
+                        break;
+                    }
+                }
+            }
+            elem.remove();
+        }.bind(this),25000);
+    },
+    positionWall: function () {
+        for(var i=0;i<=this.barrage.length;i++){//从上至下找出每条弹幕轨道上最后一条弹幕移动的位置
+            if(i===this.barrage.length){//每条弹幕轨道上都有弹幕未全部出现的情况
+                this.minOffset();//弹幕墙上所有的位置都有弹幕且都未出现完毕时，找出他们当中完全最先的那个
+            }else{//若有某个最后一条弹幕已经全部出现
+                if(this.afterOffset(i))break;//找到弹幕出现的位置，找到则退出循环
+            }
+        }
+    },
+    minOffset: function (){//找出所有弹幕轨道上最后一个弹幕中最先出现的那个（偏移量减去自身宽度）
+        var minOffset=0;
+        for(var x=0;x<this.barrage.length;x++){
+            var elem=this.barrage[x][this.barrage[x].length-1];//获取当前弹幕轨道上最后一条弹幕
+            var aboveWidth=elem.width();//获取它的宽度
+            var matrix=elem.css('transform');//获取它的矩阵值
+            this.barrageOffset[x]=matrix==="none"?-aboveWidth:-parseInt(matrix.split(",")[4])-aboveWidth;//matrix为none则弹幕translateX为0
+            minOffset=this.barrageOffset[x] > this.barrageOffset[minOffset]?x:minOffset;//找到最先出现的弹幕
+        }
+        this.lastElem=minOffset;
+    },
+    afterOffset: function (i){//找到弹幕出现的位置
+        if(this.barrage[i].length===0){//为true则表示当前弹幕轨道没有弹幕，则当前弹幕放在改轨道上
+            this.lastElem=i;
+            this.overlapElem=-1;
+            return true;
+        }else{//当前弹幕轨道上有弹幕
+            var elem=this.barrage[i][this.barrage[i].length-1];//获取当前弹幕轨道上最后一条弹幕
+            var aboveWidth=elem.width();//获取它的宽度
+            var matrix=elem.css('transform');//获取它的矩阵值
+            if(matrix!=="none"){
+                var aboveTransform=parseInt(matrix.split(",")[4]);//取出最后一条弹幕的矩阵值中X轴的偏移量，即translateX
+                if(-aboveTransform-aboveWidth>50){//50为间隔 为true则表示当前弹幕轨道上最后一条弹幕已经全部出现，则当前弹幕放在改轨道上
+                    this.lastElem=i;
+                    this.overlapElem=-1;
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+}
--- a/js/javascript.js
+++ b/js/javascript.js
@ -48,4 +48,34 @@ jQuery(function($){
 			} 
 		}
 	})
+	
+	$(".massage-box ul li").on('click',function(){
+		$(".massage-box ul li").removeClass('itemActive');
+		$(this).addClass('itemActive');
 	})
+})
+// 播放视频
+function playVedio(){
+	var video = document.getElementById("video_id"); 
+	var videoBox = document.getElementsByClassName('video-play-box');
+	document.getElementById("video-box").style.display = "flex"; 
+	$("#video_id").attr("src",'imgs/secondary/1')
+	video.play(); //播放控制
+}
+// 关闭视频
+function closeVideo() {
+	var video = document.getElementById("video_id");
+	var videoBox = document.getElementsByClassName('video-play-box');
+	document.getElementById("video-box").style.display = "none"; 
+	video.pause(); //暂停控制
+}
+// 查看详情
+function checkInfo(){
+	$('.info-box').addClass('taskBox');
+	$('.close-box').addClass('btn-close');
+}
+// 关闭详情
+function closeEv(){
+	$('.info-box').removeClass('taskBox');
+	$('.close-box').removeClass('btn-close');
+}
--- a/pages/error/404.html
+++ b/pages/error/404.html
@ -1,9 +0,0 @@
-<!DOCTYPE html>
-<html>
-	<head>
-		<meta charset="utf-8">
-		<title></title>
-	</head>
-	<body>
-	</body>
-</html>
--- a/pages/error/nomore.html
+++ b/pages/error/nomore.html
@ -1,9 +0,0 @@
-<!DOCTYPE html>
-<html>
-	<head>
-		<meta charset="utf-8">
-		<title></title>
-	</head>
-	<body>
-	</body>
-</html>
--- a/pages/htmls/danm.html
+++ b/pages/htmls/danm.html
@ -0,0 +1,41 @@
+<html>
+	<head lang="en">
+		<meta charset="UTF-8">
+		<meta http-equiv="X-UA-Compatible" content="IE=edge">
+		<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
+		<title>弹幕</title>
+		<link rel="stylesheet" href="../../css/wall.css">
+		<script></script>
+	</head>
+	<style type="text/css" id="171068071682"></style>
+	<body style="">
+		<div id="container" class="container">
+			<div class="list animate" style="top: 0px;"><img src="images/aq.png" alt="">我是说话人：我说的话</div>
+		</div>
+		<div class="input-box">
+			<!--限制用户输入的文字长度，尽量避免用户输入的内容长度超过屏幕的宽度-->
+			<input type="text" maxlength="20" placeholder="说点什么吧~">
+			<button id="btn" class="btn">发送</button>
+		</div>
+		<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
+		<script src="https://s1.pstatp.com/cdn/expire-1-M/jquery/1.10.2/jquery.min.js"></script>
+		<script src="../../js/barrageWall.js"></script>
+		<script>
+			$("#btn").click(function() {
+				var vla = $(this).prev().val().replace(/(^\s*)|(\s*$)/g, "");
+				if (vla) {
+					barrageWall.upWall("../../favicon.ico", "我是说话人", vla); //初始化弹幕墙
+				}
+			})
+
+			$(function() {
+				var option = {
+					container: "#container", //弹幕墙的id
+					barrageLen: 5 //弹幕的行数
+				}
+				barrageWall.init(option); //初始化弹幕墙
+				barrageWall.upWall("../../favicon.ico", "我是说话人", "我说的话"); //初始化弹幕墙
+			})
+		</script>
+	</body>
+</html>
--- a/pages/htmls/massage.html
+++ b/pages/htmls/massage.html
@ -0,0 +1,187 @@
+<!DOCTYPE html>
+<!-- 更加标准的 lang 属性写法 zh-cmn-Hant:繁体中文，zh-cmn-Hans:简体中文 -->
+<html lang="zh-cmn-Hans">
+	<head>
+		<!-- 声明文档使用的字符编码 -->
+		<meta charset="utf-8" />
+		<!-- 优先使用 IE 最新版本和 Chrome -->
+		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+		<!-- 网页作者 -->
+		<meta name="author" content="吃肉的饺子,2659004835@qq.com" />
+		<!-- 网站说明 -->
+		<meta name="description" content="基于SEO网站" />
+		<!-- 关键字 -->
+		<meta name="keywords" content="基于SEO网站" />
+		<!-- 防页面被转码----根据浏览器的屏幕大小自适应的展现合适的效果，同时适合在移动设备和电脑上进行浏览 -->
+		<meta name="applicable-device" content="pc,mobile" />
+		<meta name="MobileOptimized" content="width" />
+		<meta name="HandheldFriendly" content="true" />
+		<!-- 限制所有的搜索引擎建立网页快照 -->
+		<meta name="robots" content="noarchive"/>
+		<!-- 为移动设备添加 viewport -->
+		<meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
+		<!-- 控制选项卡颜色，手机端切换软件时 -->
+		<meta name="theme-color" content="#db5945">
+		<!-- 禁止 Chrome 浏览器中自动提示翻译 -->
+		<meta name="google" value="notranslate">
+		<!-- 添加 favicon icon  icon在线制作链接：（比特虫）https://www.bitbug.net/ -->
+		<link rel="shortcut icon" type="image/ico" href="../../favicon.ico" />
+		<!-- 网站标题 -->
+		<title>金沙酒业</title>
+		<!-- 标签基本样式 -->
+		<link rel="stylesheet" type="text/css" href="../../css/base.css"/>
+		<!-- swiper轮播 -->
+		<link rel="stylesheet" type="text/css" href="../../css/swiper.min.css"/>
+		<link rel="stylesheet" type="text/css" href="../../css/animate.min.css"/>
+		<!-- 自定义样式 -->
+		<link rel="stylesheet" type="text/css" href="../../css/style.css"/>
+		<link rel="stylesheet" type="text/css" href="../../css/wall.css"/>
+		<!-- 外部js -->
+		<script src="../../js/jquery.js" type="text/javascript" charset="utf-8"></script>
+		<!-- <script src="./js/jquery.min.js" type="text/javascript" charset="utf-8"></script> -->
+		<script src="../../js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
+		<script src="../../js/swiper.animate1.0.3.min.js" type="text/javascript" charset="utf-8"></script>
+		<!-- 自定义js -->
+		<script src="../../js/javascript.js" type="text/javascript" charset="utf-8"></script>
+		
+		<script type="text/javascript">
+			// 更新js文件版本，达到清除js带来的缓存
+			var scripts = document.getElementsByTagName("script");
+			for(var i = 0;i < scripts.length; i++){
+				if(scripts[i].src){
+					scripts[i].src = scripts[i].src+"?t="+new Date().getTime();
+				}
+			}
+			// 更新css文件版本，达到清除css带来的缓存
+			var csss = document.getElementsByTagName("link");
+			for(var i = 0;i < csss.length; i++){
+				if(csss[i].href){
+					csss[i].href = csss[i].href+"?t="+new Date().getTime();
+				}
+			}
+		</script>
+	</head>
+	<body>
+		<!-- 主体内容 -->
+		<main class="main">
+			<div class="box-content">
+				<div class="bao-box">
+					<div class="container massage-slide" id="container">
+						<!-- <div class="item-slide">
+							<img src="../../imgs/public/close-icon.png" >
+							<p>“勿忘昨天，无愧今天，不负明天”</p>
+						</div>
+						<div class="item-slide">
+							<img src="../../imgs/public/close-icon.png" >
+							<p>“勿忘昨天，无愧今天，不负明天”</p>
+						</div>
+						<div class="item-slide">
+							<img src="../../imgs/public/close-icon.png" >
+							<p>“勿忘昨天，无愧今天，不负明天”</p>
+						</div>
+						<div class="item-slide">
+							<img src="../../imgs/public/close-icon.png" >
+							<p>“勿忘昨天，无愧今天，不负明天”</p>
+						</div>
+						<div class="item-slide">
+							<img src="../../imgs/public/close-icon.png" >
+							<p>“勿忘昨天，无愧今天，不负明天”</p>
+						</div> -->
+					</div>
+					<div class="massage-box">
+						<ul>
+							<li><span>·</span><p>金沙回沙酒，畅销贵州60年</p></li>
+							<li><span>·</span><p>赤水河上游金沙产区</p></li>
+							<li><span>·</span><p>勿忘昨天，无愧今天，不负明天</p></li>
+							<li><span>·</span><p>百年金沙，百亿酒业</p></li>
+							<li><span>·</span><p>金沙酒业坚持初心，砥砺前行</p></li>
+							<li><span>·</span><p>摘要酱香酒，高端新选择</p></li>
+							<li><span>·</span><p>祝金沙酒业蓬勃发展，日胜一日</p></li>
+							<li><span>·</span><p>感恩奋进70年，致敬时代金杀人</p></li>
+							<li><span>·</span><p>铸一流产区，塑千亿品牌</p></li>
+							<li><span>·</span><p>风雨同舟70载，共迎金沙新时代</p></li>
+						</ul>
+					</div>
+					<!-- 按钮 -->
+					<div class="fun-box">
+						<div class="fun-item">
+							<img src="../../imgs/public/hear.png" >
+							<img onclick="sayEv()" src="../../imgs/public/say.png" >
+						</div>
+						<a href="javascript:;"><img class="send-img" src="../../imgs/public/send-icon.png" ></a>
+					</div>
+				</div>
+			</div>
+		</main>
+		<!-- 底部部分 -->
+		<footer class="footer">
+			<a href="javascript:;"><img src="../../imgs/public/yinxiang-icon.png" ></a>
+			<a href="javascript:;"><img src="../../imgs/public/vr-icon.png" ></a>
+			<a href="javascript:;"><img src="../../imgs/public/jiyu-icon.png" ></a>
+		</footer>
+		<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
+		<script src="https://s1.pstatp.com/cdn/expire-1-M/jquery/1.10.2/jquery.min.js"></script>
+		<script src="../../js/barrageWall.js"></script>
+		<script>
+			var val = '';
+			var times = 0;
+			var timer = null;
+			var sayArr = [
+				'金沙回沙酒，畅销贵州60年',
+				'赤水河上游金沙产区',
+				'勿忘昨天，无愧今天，不负明天',
+				'百年金沙，百亿酒业',
+				'金沙酒业坚持初心，砥砺前行',
+				'摘要酱香酒，高端新选择',
+				'祝金沙酒业蓬勃发展，日胜一日',
+				'感恩奋进70年，致敬时代金杀人',
+				'铸一流产区，塑千亿品牌',
+				'风雨同舟70载，共迎金沙新时代',
+			]
+			// 内容选择事件
+			$(".massage-box ul li").click(function() {
+				// var val = $(this).prev().val().replace(/(^\s*)|(\s*$)/g, "");
+				val = `“${$(this).find('p').text()}”` 
+				// if (val) {
+				// 	barrageWall.upWall("../../favicon.ico", "", val); //初始化弹幕墙
+				// }
+			})
+			// 留言事件
+			function sayEv(){
+				$('.fun-item').css('display','none');
+				$('.send-img').css('display','flex');
+				$('.massage-box').css('display','block')
+			}
+			// 发送事件
+			$('.send-img').on('click',function(){
+				if(times==0){
+					times++;
+					barrageWall.upWall("../../favicon.ico", "", val); //初始化弹幕墙
+					setTimeout(()=>{
+						times = 0;
+					},1000)
+				}
+			})
+			// 随机播放弹幕
+			timer = setInterval(()=>{
+				barrageWall.upWall("../../favicon.ico", "", `“${sayArr[Math.floor(Math.random()*sayArr.length)]}”`); //初始化弹幕墙
+			},500)
+			// 关闭内容框
+			$('.container').on('click',function(){
+				$('.fun-item').css('display','inline-block');
+				$('.send-img').css('display','none');
+				$('.massage-box').css('display','none')
+			})
+			// 弹幕墙
+			$(function() {
+				var option = {
+					container: "#container", //弹幕墙的id
+					barrageLen: 5 //弹幕的行数
+				}
+				barrageWall.init(option); //初始化弹幕墙
+				// barrageWall.upWall("../../favicon.ico", "", "我说的话"); //初始化弹幕墙
+				
+			})
+		</script>
+	</body>
+</html>
--- a/pages/public/footer.html
+++ b/pages/public/footer.html
@ -1,9 +0,0 @@
-<!DOCTYPE html>
-<html>
-	<head>
-		<meta charset="utf-8">
-		<title></title>
-	</head>
-	<body>
-	</body>
-</html>
--- a/pages/public/header.html
+++ b/pages/public/header.html
@ -1,9 +0,0 @@
-<!DOCTYPE html>
-<html>
-	<head>
-		<meta charset="utf-8">
-		<title></title>
-	</head>
-	<body>
-	</body>
-</html>