|
|
|
@ -1,25 +1,41 @@
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head lang="en">
|
|
|
|
|
<!-- 设置字符编码为 UTF-8 -->
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<!-- 设置网页标题 -->
|
|
|
|
|
<title>首页</title>
|
|
|
|
|
<!-- 设置网页描述信息 -->
|
|
|
|
|
<meta name="description" content=""/>
|
|
|
|
|
<!-- 设置网页关键词 -->
|
|
|
|
|
<meta name="keywords" content=""/>
|
|
|
|
|
<!-- 设置网页作者 -->
|
|
|
|
|
<meta name="author" content="order by mobanxiu.cn"/>
|
|
|
|
|
<!-- 指定使用 WebKit 渲染引擎 -->
|
|
|
|
|
<meta name="renderer" content="webkit">
|
|
|
|
|
<!-- 让 IE 浏览器使用最新的渲染模式 -->
|
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
|
|
|
|
|
<!-- 设置页面在不同设备上的显示效果 -->
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
|
|
|
<!-- 引入 layui 框架的 CSS 文件 -->
|
|
|
|
|
<link rel="stylesheet" href="../../layui/css/layui.css">
|
|
|
|
|
<!-- 引入自定义的公共 CSS 文件 -->
|
|
|
|
|
<link rel="stylesheet" href="../../xznstatic/css/common.css"/>
|
|
|
|
|
<!-- 引入自定义的样式 CSS 文件 -->
|
|
|
|
|
<link rel="stylesheet" href="../../xznstatic/css/style.css"/>
|
|
|
|
|
<!-- 引入 swiper 插件的 CSS 文件 -->
|
|
|
|
|
<link rel="stylesheet" href="../../xznstatic/css/swiper.min.css"/>
|
|
|
|
|
<!-- 引入 jQuery 库 -->
|
|
|
|
|
<script src="../../xznstatic/js/jquery-1.11.3.min.js"></script>
|
|
|
|
|
<!-- 引入 SuperSlide 插件 -->
|
|
|
|
|
<script src="../../xznstatic/js/jquery.SuperSlide.2.1.1.js"></script>
|
|
|
|
|
<!-- 引入 Bootstrap 框架的 CSS 文件 -->
|
|
|
|
|
<link rel="stylesheet" href="../../xznstatic/css/bootstrap.min.css" />
|
|
|
|
|
|
|
|
|
|
<!-- 引入自定义的主题 CSS 文件 -->
|
|
|
|
|
<link rel="stylesheet" href="../../css/theme.css"/>
|
|
|
|
|
</head>
|
|
|
|
|
<style>
|
|
|
|
|
/* 为 HTML 元素添加背景样式 */
|
|
|
|
|
html::after {
|
|
|
|
|
position: fixed;
|
|
|
|
|
top: 0;
|
|
|
|
@ -33,10 +49,12 @@
|
|
|
|
|
background-position: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 设置轮播图容器的样式 */
|
|
|
|
|
#test1 {
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 设置轮播图指示器的样式 */
|
|
|
|
|
#test1 .layui-carousel-ind li {
|
|
|
|
|
width: 20px;
|
|
|
|
|
height: 10px;
|
|
|
|
@ -48,6 +66,7 @@
|
|
|
|
|
box-shadow: 0 0 6px rgba(255, 0, 0, .8);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 设置当前激活的轮播图指示器的样式 */
|
|
|
|
|
#test1 .layui-carousel-ind li.layui-this {
|
|
|
|
|
width: 30px;
|
|
|
|
|
height: 10px;
|
|
|
|
@ -57,6 +76,7 @@
|
|
|
|
|
border-radius: 6px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 设置推荐区域的样式 */
|
|
|
|
|
.recommend {
|
|
|
|
|
padding: 10px 0;
|
|
|
|
|
display: flex;
|
|
|
|
@ -66,10 +86,12 @@
|
|
|
|
|
background-size: cover;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 设置推荐区域内容盒子的样式 */
|
|
|
|
|
.recommend .box {
|
|
|
|
|
width: 1014px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 设置推荐区域标题的样式 */
|
|
|
|
|
.recommend .box .title {
|
|
|
|
|
padding: 10px 5px;
|
|
|
|
|
display: flex;
|
|
|
|
@ -78,22 +100,26 @@
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 设置推荐区域标题文字的样式 */
|
|
|
|
|
.recommend .box .title span {
|
|
|
|
|
padding: 0 10px;
|
|
|
|
|
line-height: 1.4;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 设置推荐区域列表的样式 */
|
|
|
|
|
.recommend .box .list {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 设置推荐区域列表项的样式,使用变量 var1 控制宽度 */
|
|
|
|
|
.index-pv1 .box .list .list-item {
|
|
|
|
|
flex: 0 0 ${var1}%;
|
|
|
|
|
padding: 0 5px;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 设置推荐区域列表项主体的样式 */
|
|
|
|
|
.recommend .box .list .list-item-body {
|
|
|
|
|
border: 1px solid rgba(0, 0, 0, 3);
|
|
|
|
|
padding: 5px;
|
|
|
|
@ -101,6 +127,7 @@
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 设置推荐区域列表项图片的样式 */
|
|
|
|
|
.recommend .box .list img {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100px;
|
|
|
|
@ -110,6 +137,7 @@
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 设置推荐区域列表项名称的样式 */
|
|
|
|
|
.recommend .box .list .name {
|
|
|
|
|
padding-top: 5px;
|
|
|
|
|
color: red;
|
|
|
|
@ -118,6 +146,7 @@
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 设置推荐区域列表项不同布局的宽度 */
|
|
|
|
|
.recommend .box .list .list-item1 {
|
|
|
|
|
flex: 0 0 100%;
|
|
|
|
|
}
|
|
|
|
@ -139,28 +168,33 @@
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 商品推荐-样式4-开始 */
|
|
|
|
|
/* 设置推荐区域样式4的列表样式 */
|
|
|
|
|
.recommend .list-4 {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 设置推荐区域样式4的列表主体样式 */
|
|
|
|
|
.recommend .list-4 .list-4-body {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 设置推荐区域样式4的列表项样式 */
|
|
|
|
|
.recommend .list-4 .list-4-item {
|
|
|
|
|
position: relative;
|
|
|
|
|
z-index: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 设置推荐区域样式4的列表项1的样式 */
|
|
|
|
|
.recommend .list-4 .list-4-item.item-1 {
|
|
|
|
|
width: 400px;
|
|
|
|
|
height: 400px;
|
|
|
|
|
margin-right: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 设置推荐区域样式4的列表项2的样式 */
|
|
|
|
|
.recommend .list-4 .list-4-item.item-2 {
|
|
|
|
|
width: 220px;
|
|
|
|
|
height: 190px;
|
|
|
|
@ -168,6 +202,7 @@
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 设置推荐区域样式4的列表项3的样式 */
|
|
|
|
|
.recommend .list-4 .list-4-item.item-3 {
|
|
|
|
|
width: 220px;
|
|
|
|
|
height: 190px;
|
|
|
|
@ -175,6 +210,7 @@
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 设置推荐区域样式4的列表项4的样式 */
|
|
|
|
|
.recommend .list-4 .list-4-item.item-4 {
|
|
|
|
|
width: 190px;
|
|
|
|
|
height: 190px;
|
|
|
|
@ -182,6 +218,7 @@
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 设置推荐区域样式4的列表项5的样式 */
|
|
|
|
|
.recommend .list-4 .list-4-item.item-5 {
|
|
|
|
|
width: 190px;
|
|
|
|
|
height: 190px;
|
|
|
|
@ -189,6 +226,7 @@
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 设置推荐区域样式4的列表项图片的样式 */
|
|
|
|
|
.recommend .list-4 .list-4-item img {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
@ -196,6 +234,7 @@
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 设置推荐区域样式4的列表项中心区域的样式 */
|
|
|
|
|
.recommend .list-4 .list-4-item .list-4-item-center {
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 0;
|
|
|
|
@ -207,6 +246,7 @@
|
|
|
|
|
background-color: rgba(0, 0, 0, .3);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 设置推荐区域样式4的列表项标题的样式 */
|
|
|
|
|
.recommend .list-4 .list-4-item .list-4-item-center .list-4-item-title {
|
|
|
|
|
width: 50%;
|
|
|
|
|
text-align: left;
|
|
|
|
@ -216,6 +256,7 @@
|
|
|
|
|
padding: 0 6px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 设置推荐区域样式4的列表项价格的样式 */
|
|
|
|
|
.recommend .list-4 .list-4-item .list-4-item-center .list-4-item-price {
|
|
|
|
|
width: 50%;
|
|
|
|
|
text-align: right;
|
|
|
|
@ -227,40 +268,49 @@
|
|
|
|
|
|
|
|
|
|
/* 商品推荐-样式4-结束 */
|
|
|
|
|
/* 商品推荐-样式5-开始 */
|
|
|
|
|
/* 设置推荐区域样式5的 swiper 分页器的样式 */
|
|
|
|
|
.recommend #recommend-five-swiper.swiper-container-horizontal > .swiper-pagination-bullets {
|
|
|
|
|
line-height: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 设置推荐区域样式5的 swiper 上一个幻灯片的样式 */
|
|
|
|
|
.recommend #recommend-five-swiper .swiper-slide.swiper-slide-prev {
|
|
|
|
|
z-index: 5;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 设置推荐区域样式5的 swiper 下一个幻灯片的样式 */
|
|
|
|
|
.recommend #recommend-five-swiper .swiper-slide.swiper-slide-next {
|
|
|
|
|
z-index: 5;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 设置推荐区域样式5的 swiper 当前激活幻灯片的样式 */
|
|
|
|
|
.recommend #recommend-five-swiper .swiper-slide.swiper-slide-active {
|
|
|
|
|
z-index: 9;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 设置推荐区域样式5的另一个 swiper 分页器的样式 */
|
|
|
|
|
.recommend #lists-five-swiper.swiper-container-horizontal > .swiper-pagination-bullets {
|
|
|
|
|
line-height: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 设置推荐区域样式5的另一个 swiper 上一个幻灯片的样式 */
|
|
|
|
|
.recommend #lists-five-swiper .swiper-slide.swiper-slide-prev {
|
|
|
|
|
z-index: 5;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 设置推荐区域样式5的另一个 swiper 下一个幻灯片的样式 */
|
|
|
|
|
.recommend #lists-five-swiper .swiper-slide.swiper-slide-next {
|
|
|
|
|
z-index: 5;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 设置推荐区域样式5的另一个 swiper 当前激活幻灯片的样式 */
|
|
|
|
|
.recommend #lists-five-swiper .swiper-slide.swiper-slide-active {
|
|
|
|
|
z-index: 9;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 商品推荐-样式5-结束 */
|
|
|
|
|
|
|
|
|
|
/* 设置新闻区域的样式 */
|
|
|
|
|
.news {
|
|
|
|
|
padding: 10px 0;
|
|
|
|
|
display: flex;
|
|
|
|
@ -271,10 +321,12 @@
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 设置新闻区域内容盒子的样式 */
|
|
|
|
|
.news .box {
|
|
|
|
|
width: 1014px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 设置新闻区域标题的样式 */
|
|
|
|
|
.news .box .title {
|
|
|
|
|
padding: 10px 5px;
|
|
|
|
|
display: flex;
|
|
|
|
@ -283,22 +335,26 @@
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 设置新闻区域标题文字的样式 */
|
|
|
|
|
.news .box .title span {
|
|
|
|
|
padding: 0 10px;
|
|
|
|
|
line-height: 1.4;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 设置新闻区域列表的样式 */
|
|
|
|
|
.news .box .list {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 设置新闻区域列表项的样式 */
|
|
|
|
|
.index-pv2 .box .list .list-item {
|
|
|
|
|
flex: 0 0 25%;
|
|
|
|
|
padding: 0 10px;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 设置新闻区域列表项主体的样式 */
|
|
|
|
|
.news .box .list .list-item .list-item-body {
|
|
|
|
|
border: 1px solid rgba(0, 0, 0, 3);
|
|
|
|
|
padding: 10px;
|
|
|
|
@ -307,6 +363,7 @@
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 设置新闻区域列表项图片的样式 */
|
|
|
|
|
.news .box .list .list-item .list-item-body img {
|
|
|
|
|
width: 120px;
|
|
|
|
|
height: 100%;
|
|
|
|
@ -316,6 +373,7 @@
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 设置新闻区域列表项信息区域的样式 */
|
|
|
|
|
.news .box .list .list-item .list-item-body .item-info {
|
|
|
|
|
flex: 1;
|
|
|
|
|
display: flex;
|
|
|
|
@ -325,6 +383,7 @@
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 设置新闻区域列表项名称的样式 */
|
|
|
|
|
.news .box .list .list-item .list-item-body .item-info .name {
|
|
|
|
|
padding-top: 5px;
|
|
|
|
|
color: red;
|
|
|
|
@ -337,6 +396,7 @@
|
|
|
|
|
-webkit-box-orient: vertical;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 设置新闻区域列表项时间的样式 */
|
|
|
|
|
.news .box .list .list-item .list-item-body .item-info .time {
|
|
|
|
|
padding-top: 5px;
|
|
|
|
|
color: red;
|
|
|
|
@ -348,6 +408,7 @@
|
|
|
|
|
-webkit-box-orient: vertical;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 设置新闻区域列表项不同布局的宽度 */
|
|
|
|
|
.news .box .list .list-item1 {
|
|
|
|
|
flex: 0 0 100%;
|
|
|
|
|
}
|
|
|
|
@ -360,6 +421,7 @@
|
|
|
|
|
flex: 0 0 25%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 设置列表区域的样式 */
|
|
|
|
|
.lists {
|
|
|
|
|
padding: 10px 0;
|
|
|
|
|
display: flex;
|
|
|
|
@ -369,11 +431,13 @@
|
|
|
|
|
background-size: cover;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 设置列表区域内容盒子的样式 */
|
|
|
|
|
.lists .box {
|
|
|
|
|
width: 1014px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 设置列表区域标题的样式 */
|
|
|
|
|
.lists .box .title {
|
|
|
|
|
padding: 10px 5px;
|
|
|
|
|
display: flex;
|
|
|
|
@ -382,21 +446,25 @@
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 设置列表区域标题文字的样式 */
|
|
|
|
|
.lists .box .title span {
|
|
|
|
|
padding: 0 10px;
|
|
|
|
|
line-height: 1.4;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 设置列表区域 swiper 幻灯片的样式 */
|
|
|
|
|
.lists .box .swiper-slide {
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 设置列表区域 swiper 幻灯片图片盒子的样式 */
|
|
|
|
|
.lists .box .swiper-slide .img-box {
|
|
|
|
|
width: 100%;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 设置列表区域 swiper 幻灯片图片的样式 */
|
|
|
|
|
.lists .box .swiper-slide .img-box img {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
@ -404,6 +472,7 @@
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 设置不同布局下动画盒子的悬停样式 */
|
|
|
|
|
.index-pv1 .animation-box:hover {
|
|
|
|
|
transform: perspective(10px) translate3d(-10px, -10px, 0px) scale(1) rotate(0deg) skew(0deg, 0deg);
|
|
|
|
|
transition: all 0.3s;
|
|
|
|
@ -411,18 +480,19 @@
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
.index-pv2 .animation-box:hover {
|
|
|
|
|
transform: perspective(10px) translate3d(-10px, -10px, 0px) scale(1) rotate(0deg) skew(0deg, 0deg);
|
|
|
|
|
transition: all 0.3s;
|
|
|
|
|
z-index: 2;
|
|
|
|
|
position: relative;
|
|
|
|
|
transform: perspective(10px) translate3d(-10px, -10px, 0px) scale(1) rotate(0deg) skew(0deg, 0deg);
|
|
|
|
|
transition: all 0.3s;
|
|
|
|
|
z-index: 2;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
.index-pv3 .animation-box:hover {
|
|
|
|
|
transform: perspective(10px) translate3d(-10px, -10px, 0px) scale(1) rotate(0deg) skew(0deg, 0deg);
|
|
|
|
|
transition: all 0.3s;
|
|
|
|
|
z-index: 2;
|
|
|
|
|
position: relative;
|
|
|
|
|
transform: perspective(10px) translate3d(-10px, -10px, 0px) scale(1) rotate(0deg) skew(0deg, 0deg);
|
|
|
|
|
transition: all 0.3s;
|
|
|
|
|
z-index: 2;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 设置新列表6的 swiper 滑动过渡效果为线性 */
|
|
|
|
|
#new-list-6 .swiper-wrapper {
|
|
|
|
|
-webkit-transition-timing-function: linear;
|
|
|
|
|
-moz-transition-timing-function: linear;
|
|
|
|
@ -432,11 +502,14 @@
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<body>
|
|
|
|
|
<!-- Vue 实例挂载的根元素 -->
|
|
|
|
|
<div id="app">
|
|
|
|
|
<!-- 轮播图区域 -->
|
|
|
|
|
<div class="banner">
|
|
|
|
|
<div class="layui-carousel" id="test1"
|
|
|
|
|
:style='{"boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 auto","borderColor":"rgba(0,0,0,.3)","borderRadius":"0px","borderWidth":"0","width":"100%","borderStyle":"solid"}'>
|
|
|
|
|
<div carousel-item>
|
|
|
|
|
<!-- 循环渲染轮播图列表 -->
|
|
|
|
|
<div v-for="(item,index) in swiperList" :key="index">
|
|
|
|
|
<img style="width: 100%;height: 100%;object-fit:cover;" :src="item.img"/>
|
|
|
|
|
</div>
|
|
|
|
@ -444,95 +517,117 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 内容区域 -->
|
|
|
|
|
<div id="content">
|
|
|
|
|
<!-- 新闻区域 -->
|
|
|
|
|
<div class="news index-pv2" style="display: flex;justify-content: center;width:100%"
|
|
|
|
|
:style='{"padding":"10px 0 10px 0","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"10px 0 0 0","borderColor":"rgba(0,0,0,.3)","backgroundColor":"rgba(255, 0, 0, 0)","borderRadius":"0","borderWidth":"0","borderStyle":"solid"}'>
|
|
|
|
|
:style='{"padding":"10px 0 10px 0","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"10px 0 0 0","borderColor":"rgba(0,0,0,.3)","backgroundColor":"rgba(255, 0, 0, 0)","borderRadius":"0","borderWidth":"0","borderStyle":"solid"}'>
|
|
|
|
|
<div class="box" style='width:80%'>
|
|
|
|
|
<div class="title main_backgroundColor sub_borderColor"
|
|
|
|
|
:style='{"padding":"10px 0 10px 0","boxShadow":"0 0 3px ","margin":"10px 0 10px 0","color":"rgba(23, 22, 23, 1)","borderRadius":"0px","alignItems":"flex-start","borderWidth":"0 10px","fontSize":"17px","borderStyle":"solid"}'>
|
|
|
|
|
<span>NEWS</span>
|
|
|
|
|
<span>公告信息展示</span>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 新闻区域标题 -->
|
|
|
|
|
<div class="title main_backgroundColor sub_borderColor"
|
|
|
|
|
:style='{"padding":"10px 0 10px 0","boxShadow":"0 0 3px ","margin":"10px 0 10px 0","color":"rgba(23, 22, 23, 1)","borderRadius":"0px","alignItems":"flex-start","borderWidth":"0 10px","fontSize":"17px","borderStyle":"solid"}'>
|
|
|
|
|
<span>NEWS</span>
|
|
|
|
|
<span>公告信息展示</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 新闻列表 -->
|
|
|
|
|
<div class="list">
|
|
|
|
|
<div v-for="(item,index) in newsList" :key="index" class="list-item list-item5" @click="jump('../news/detail.html?id='+item.id)">
|
|
|
|
|
<div class="list-item-body animation-box sub_borderColor" :style='{"padding":"0","margin":"10px 6px 20px 6px","borderColor":"rgba(0,0,0,.3)","backgroundColor":"#fff","borderRadius":"6px","borderWidth":"0","borderStyle":"solid"}'>
|
|
|
|
|
<img :style='{"boxShadow":"","borderColor":"rgba(0,0,0,.3)","borderRadius":"0","borderWidth":"0","width":"60%","borderStyle":"solid","height":"220px"}' :src="item.newsPhoto" alt="" />
|
|
|
|
|
<div class="item-info">
|
|
|
|
|
<div v-if='true' :style='{"isshow":true,"padding":"2px","margin":"8px 0 0 0","backgroundColor":"rgba(0,0,0,0)","color":"rgba(51, 51, 51, 1)","borderRadius":"0","textAlign":"center","fontSize":"16px"}' class="name">{{item.newsName}}</div>
|
|
|
|
|
<div :style='{"padding":"0","margin":"0","backgroundColor":"rgba(0,0,0,0)","color":"#999","borderRadius":"0","textAlign":"left","fontSize":"12px"}' class="time">{{item.insertTime}}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 循环渲染新闻列表项 -->
|
|
|
|
|
<div v-for="(item,index) in newsList" :key="index" class="list-item list-item5" @click="jump('../news/detail.html?id='+item.id)">
|
|
|
|
|
<div class="list-item-body animation-box sub_borderColor" :style='{"padding":"0","margin":"10px 6px 20px 6px","borderColor":"rgba(0,0,0,.3)","backgroundColor":"#fff","borderRadius":"6px","borderWidth":"0","borderStyle":"solid"}'>
|
|
|
|
|
<img :style='{"boxShadow":"","borderColor":"rgba(0,0,0,.3)","borderRadius":"0","borderWidth":"0","width":"60%","borderStyle":"solid","height":"220px"}' :src="item.newsPhoto" alt="" />
|
|
|
|
|
<div class="item-info">
|
|
|
|
|
<!-- 新闻名称 -->
|
|
|
|
|
<div v-if='true' :style='{"isshow":true,"padding":"2px","margin":"8px 0 0 0","backgroundColor":"rgba(0,0,0,0)","color":"rgba(51, 51, 51, 1)","borderRadius":"0","textAlign":"center","fontSize":"16px"}' class="name">{{item.newsName}}</div>
|
|
|
|
|
<!-- 新闻发布时间 -->
|
|
|
|
|
<div :style='{"padding":"0","margin":"0","backgroundColor":"rgba(0,0,0,0)","color":"#999","borderRadius":"0","textAlign":"left","fontSize":"12px"}' class="time">{{item.insertTime}}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="clear"></div>
|
|
|
|
|
<div style="text-align: center;">
|
|
|
|
|
<!-- 查看更多新闻按钮 -->
|
|
|
|
|
<button @click="jump('../news/list.html')" style="display: block;cursor: pointer;" type="button"
|
|
|
|
|
:style='{"padding":"0 15px","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"4px auto","borderColor":"#ccc","backgroundColor":"#fff","color":"rgba(160, 67, 26, 1)","borderRadius":"6px","borderWidth":"0","width":"auto","fontSize":"14px","borderStyle":"solid","height":"34px"}'>
|
|
|
|
|
查看更多
|
|
|
|
|
:style='{"padding":"0 15px","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"4px auto","borderColor":"#ccc","backgroundColor":"#fff","color":"rgba(160, 67, 26, 1)","borderRadius":"6px","borderWidth":"0","width":"auto","fontSize":"14px","borderStyle":"solid","height":"34px"}'>
|
|
|
|
|
查看更多
|
|
|
|
|
<i v-if="true" :style='{"isshow":true,"padding":"0 0 0 1px","fontSize":"14px","color":"rgba(160, 67, 26, 1)"}' class="layui-icon layui-icon-next"></i>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 医生展示区域 -->
|
|
|
|
|
<div class="recommend index-pv3"
|
|
|
|
|
:style='{"padding":"10px 0 10px 0","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"10px 0 0 0","borderColor":"rgba(0,0,0,.3)","backgroundColor":"rgba(255, 0, 0, 0)","borderRadius":"4px","borderWidth":"0","borderStyle":"solid"}'>
|
|
|
|
|
<div class="box" style='width:80%'>
|
|
|
|
|
<div class="title main_backgroundColor sub_borderColor"
|
|
|
|
|
:style='{"padding":"10px 0 10px 0","boxShadow":"0 0 3px ","margin":"10px 0 10px 0","color":"rgba(23, 22, 23, 1)","borderRadius":"0px","alignItems":"flex-start","borderWidth":"0 10px","fontSize":"17px","borderStyle":"solid"}'>
|
|
|
|
|
<span>DATA SHOW</span>
|
|
|
|
|
<span>医生展示</span>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 医生展示区域标题 -->
|
|
|
|
|
<div class="title main_backgroundColor sub_borderColor"
|
|
|
|
|
:style='{"padding":"10px 0 10px 0","boxShadow":"0 0 3px ","margin":"10px 0 10px 0","color":"rgba(23, 22, 23, 1)","borderRadius":"0px","alignItems":"flex-start","borderWidth":"0 10px","fontSize":"17px","borderStyle":"solid"}'>
|
|
|
|
|
<span>DATA SHOW</span>
|
|
|
|
|
<span>医生展示</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="show-reel row">
|
|
|
|
|
<div v-for="(item,index) in yishengList" v-bind:key="index" class="col-md-3 agile-gallery-grid">
|
|
|
|
|
<div class="agile-gallery">
|
|
|
|
|
<a @click="jumpCheck('../yisheng/detail.html?id='+item.id , item.aaaaaaaaaa == null?'':item.aaaaaaaaaa , item.shangxiaTypes == null?'':item.shangxiaTypes)" class="lsb-preview" data-lsb-group="header">
|
|
|
|
|
<img :src="item.yishengPhoto?item.yishengPhoto.split(',')[0]:''" style="height: 350px;width:100%;" />
|
|
|
|
|
<div class="agileits-caption">
|
|
|
|
|
<h4>{{item.yishengName}}</h4>
|
|
|
|
|
<p v-if="item.yishengNewMoney != null" >¥{{item.yishengNewMoney}}</p>
|
|
|
|
|
</div>
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 医生展示列表 -->
|
|
|
|
|
<div class="show-reel row">
|
|
|
|
|
<!-- 循环渲染医生列表项 -->
|
|
|
|
|
<div v-for="(item,index) in yishengList" v-bind:key="index" class="col-md-3 agile-gallery-grid">
|
|
|
|
|
<div class="agile-gallery">
|
|
|
|
|
<a @click="jumpCheck('../yisheng/detail.html?id='+item.id , item.aaaaaaaaaa == null?'':item.aaaaaaaaaa , item.shangxiaTypes == null?'':item.shangxiaTypes)" class="lsb-preview" data-lsb-group="header">
|
|
|
|
|
<img :src="item.yishengPhoto?item.yishengPhoto.split(',')[0]:''" style="height: 350px;width:100%;" />
|
|
|
|
|
<div class="agileits-caption">
|
|
|
|
|
<!-- 医生姓名 -->
|
|
|
|
|
<h4>{{item.yishengName}}</h4>
|
|
|
|
|
<!-- 医生价格 -->
|
|
|
|
|
<p v-if="item.yishengNewMoney != null" >¥{{item.yishengNewMoney}}</p>
|
|
|
|
|
</div>
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="clear"></div>
|
|
|
|
|
<div style="text-align: center;">
|
|
|
|
|
<!-- 查看更多医生按钮 -->
|
|
|
|
|
<button @click="jump('../yisheng/list.html')" style="display: block;cursor: pointer;" type="button"
|
|
|
|
|
:style='{"padding":"0 15px","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"4px auto","borderColor":"#ccc","backgroundColor":"#fff","color":"rgba(160, 67, 26, 1)","borderRadius":"6px","borderWidth":"0","width":"auto","fontSize":"14px","borderStyle":"solid","height":"34px"}'>
|
|
|
|
|
查看更多<i v-if="true"
|
|
|
|
|
:style='{"isshow":true,"padding":"0 0 0 1px","fontSize":"14px","color":"rgba(160, 67, 26, 1)"}'
|
|
|
|
|
class="layui-icon layui-icon-next"></i></button>
|
|
|
|
|
:style='{"isshow":true,"padding":"0 0 0 1px","fontSize":"14px","color":"rgba(160, 67, 26, 1)"}'
|
|
|
|
|
class="layui-icon layui-icon-next"></i></button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 健康教育展示区域 -->
|
|
|
|
|
<div class="news index-pv2" style="display: flex;justify-content: center;width:100%"
|
|
|
|
|
:style='{"padding":"10px 0 10px 0","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"10px 0 0 0","borderColor":"rgba(0,0,0,.3)","backgroundColor":"rgba(255, 0, 0, 0)","borderRadius":"0","borderWidth":"0","borderStyle":"solid"}'>
|
|
|
|
|
:style='{"padding":"10px 0 10px 0","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"10px 0 0 0","borderColor":"rgba(0,0,0,.3)","backgroundColor":"rgba(255, 0, 0, 0)","borderRadius":"0","borderWidth":"0","borderStyle":"solid"}'>
|
|
|
|
|
<div class="box" style='width:80%'>
|
|
|
|
|
<div class="title main_backgroundColor sub_borderColor"
|
|
|
|
|
:style='{"padding":"10px 0 10px 0","boxShadow":"0 0 3px ","margin":"10px 0 10px 0","color":"rgba(23, 22, 23, 1)","borderRadius":"0px","alignItems":"flex-start","borderWidth":"0 10px","fontSize":"17px","borderStyle":"solid"}'>
|
|
|
|
|
<span>DATA SHOW</span>
|
|
|
|
|
<span>健康教育展示</span>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 健康教育展示区域标题 -->
|
|
|
|
|
<div class="title main_backgroundColor sub_borderColor"
|
|
|
|
|
:style='{"padding":"10px 0 10px 0","boxShadow":"0 0 3px ","margin":"10px 0 10px 0","color":"rgba(23, 22, 23, 1)","borderRadius":"0px","alignItems":"flex-start","borderWidth":"0 10px","fontSize":"17px","borderStyle":"solid"}'>
|
|
|
|
|
<span>DATA SHOW</span>
|
|
|
|
|
<span>健康教育展示</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 健康教育列表 -->
|
|
|
|
|
<div class="list">
|
|
|
|
|
<div v-for="(item,index) in jiankangjiaoyuList" :key="index" class="list-item list-item5" @click="jump('../jiankangjiaoyu/detail.html?id='+item.id)">
|
|
|
|
|
<div class="list-item-body animation-box sub_borderColor" :style='{"padding":"0","margin":"10px 6px 20px 6px","borderColor":"rgba(0,0,0,.3)","backgroundColor":"#fff","borderRadius":"6px","borderWidth":"0","borderStyle":"solid"}'>
|
|
|
|
|
<img :style='{"boxShadow":"","borderColor":"rgba(0,0,0,.3)","borderRadius":"0","borderWidth":"0","width":"60%","borderStyle":"solid","height":"220px"}' :src="item.jiankangjiaoyuPhoto" alt="" />
|
|
|
|
|
<div class="item-info">
|
|
|
|
|
<div v-if='true' :style='{"isshow":true,"padding":"2px","margin":"8px 0 0 0","backgroundColor":"rgba(0,0,0,0)","color":"rgba(51, 51, 51, 1)","borderRadius":"0","textAlign":"center","fontSize":"16px"}' class="name">{{item.jiankangjiaoyuName}}</div>
|
|
|
|
|
<div :style='{"padding":"0","margin":"0","backgroundColor":"rgba(0,0,0,0)","color":"#999","borderRadius":"0","textAlign":"left","fontSize":"12px"}' class="time">{{item.insertTime}}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 循环渲染健康教育列表项 -->
|
|
|
|
|
<div v-for="(item,index) in jiankangjiaoyuList" :key="index" class="list-item list-item5" @click="jump('../jiankangjiaoyu/detail.html?id='+item.id)">
|
|
|
|
|
<div class="list-item-body animation-box sub_borderColor" :style='{"padding":"0","margin":"10px 6px 20px 6px","borderColor":"rgba(0,0,0,.3)","backgroundColor":"#fff","borderRadius":"6px","borderWidth":"0","borderStyle":"solid"}'>
|
|
|
|
|
<img :style='{"boxShadow":"","borderColor":"rgba(0,0,0,.3)","borderRadius":"0","borderWidth":"0","width":"60%","borderStyle":"solid","height":"220px"}' :src="item.jiankangjiaoyuPhoto" alt="" />
|
|
|
|
|
<div class="item-info">
|
|
|
|
|
<!-- 健康教育名称 -->
|
|
|
|
|
<div v-if='true' :style='{"isshow":true,"padding":"2px","margin":"8px 0 0 0","backgroundColor":"rgba(0,0,0,0)","color":"rgba(51, 51, 51, 1)","borderRadius":"0","textAlign":"center","fontSize":"16px"}' class="name">{{item.jiankangjiaoyuName}}</div>
|
|
|
|
|
<!-- 健康教育发布时间 -->
|
|
|
|
|
<div :style='{"padding":"0","margin":"0","backgroundColor":"rgba(0,0,0,0)","color":"#999","borderRadius":"0","textAlign":"left","fontSize":"12px"}' class="time">{{item.insertTime}}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="clear"></div>
|
|
|
|
|
<div style="text-align: center;">
|
|
|
|
|
<!-- 查看更多健康教育按钮 -->
|
|
|
|
|
<button @click="jump('../jiankangjiaoyu/list.html')" style="display: block;cursor: pointer;" type="button"
|
|
|
|
|
:style='{"padding":"0 15px","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"4px auto","borderColor":"#ccc","backgroundColor":"#fff","color":"rgba(160, 67, 26, 1)","borderRadius":"6px","borderWidth":"0","width":"auto","fontSize":"14px","borderStyle":"solid","height":"34px"}'>
|
|
|
|
|
查看更多
|
|
|
|
|
:style='{"padding":"0 15px","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"4px auto","borderColor":"#ccc","backgroundColor":"#fff","color":"rgba(160, 67, 26, 1)","borderRadius":"6px","borderWidth":"0","width":"auto","fontSize":"14px","borderStyle":"solid","height":"34px"}'>
|
|
|
|
|
查看更多
|
|
|
|
|
<i v-if="true" :style='{"isshow":true,"padding":"0 0 0 1px","fontSize":"14px","color":"rgba(160, 67, 26, 1)"}' class="layui-icon layui-icon-next"></i>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
@ -542,32 +637,45 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 引入 Bootstrap 框架的 JavaScript 文件 -->
|
|
|
|
|
<script src="../../xznstatic/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
|
|
|
|
|
<!-- 引入 layui 框架的 JavaScript 文件 -->
|
|
|
|
|
<script src="../../layui/layui.js"></script>
|
|
|
|
|
<!-- 引入 Vue.js 库 -->
|
|
|
|
|
<script src="../../js/vue.js"></script>
|
|
|
|
|
<!-- 引入element组件库 -->
|
|
|
|
|
<!-- 引入 Element 组件库 -->
|
|
|
|
|
<script src="../../xznstatic/js/element.min.js"></script>
|
|
|
|
|
<!-- 引入element样式 -->
|
|
|
|
|
<!-- 引入 Element 组件库的样式文件 -->
|
|
|
|
|
<link rel="stylesheet" href="../../xznstatic/css/element.min.css">
|
|
|
|
|
<!-- 引入 swiper 插件的 JavaScript 文件 -->
|
|
|
|
|
<script src="../../xznstatic/js/swiper.min.js"></script>
|
|
|
|
|
<!-- 引入自定义的配置 JavaScript 文件 -->
|
|
|
|
|
<script src="../../js/config.js"></script>
|
|
|
|
|
<!-- 引入自定义的模块配置 JavaScript 文件 -->
|
|
|
|
|
<script src="../../modules/config.js"></script>
|
|
|
|
|
<!-- 引入自定义的工具 JavaScript 文件 -->
|
|
|
|
|
<script src="../../js/utils.js"></script>
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
// 创建 Vue 实例
|
|
|
|
|
var vue = new Vue({
|
|
|
|
|
// 挂载点
|
|
|
|
|
el: '#app',
|
|
|
|
|
// 数据对象
|
|
|
|
|
data: {
|
|
|
|
|
swiperList: [],
|
|
|
|
|
swiperList: [], // 轮播图列表
|
|
|
|
|
// dianyingRecommend: [],
|
|
|
|
|
newsList: [],
|
|
|
|
|
yishengList: [],
|
|
|
|
|
jiankangjiaoyuList: [],
|
|
|
|
|
newsList: [], // 新闻列表
|
|
|
|
|
yishengList: [], // 医生列表
|
|
|
|
|
jiankangjiaoyuList: [], // 健康教育列表
|
|
|
|
|
},
|
|
|
|
|
// 过滤器
|
|
|
|
|
filters: {
|
|
|
|
|
newsDesc: function (val) {
|
|
|
|
|
if (val) {
|
|
|
|
|
// 去除 HTML 标签和 undefined 字符串
|
|
|
|
|
val = val.replace(/<[^<>]+>/g, '').replace(/undefined/g, '');
|
|
|
|
|
if (val.length > 60) {
|
|
|
|
|
// 截取前 60 个字符
|
|
|
|
|
val = val.substring(0, 60);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
@ -576,31 +684,41 @@
|
|
|
|
|
return '';
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 方法
|
|
|
|
|
methods: {
|
|
|
|
|
// 页面跳转方法
|
|
|
|
|
jump(url) {
|
|
|
|
|
jump(url)
|
|
|
|
|
}
|
|
|
|
|
,jumpCheck(url,check1,check2) {
|
|
|
|
|
if(check1 == "2" || check1 == 2){//级联表的逻辑删除字段[1:未删除 2:已删除]
|
|
|
|
|
},
|
|
|
|
|
// 带检查的页面跳转方法
|
|
|
|
|
jumpCheck(url, check1, check2) {
|
|
|
|
|
if (check1 == "2" || check1 == 2) {//级联表的逻辑删除字段[1:未删除 2:已删除]
|
|
|
|
|
// 弹出提示框
|
|
|
|
|
layui.layer.msg("已经被删除", {
|
|
|
|
|
time: 2000,
|
|
|
|
|
icon: 2
|
|
|
|
|
});
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
if(check2 == "2" || check2 == 2){//是否下架[1:上架 2:下架]
|
|
|
|
|
if (check2 == "2" || check2 == 2) {//是否下架[1:上架 2:下架]
|
|
|
|
|
// 弹出提示框
|
|
|
|
|
layui.layer.msg("已经下架", {
|
|
|
|
|
time: 2000,
|
|
|
|
|
icon: 2
|
|
|
|
|
});
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
// 调用 jump 方法进行页面跳转
|
|
|
|
|
this.jump(url);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
layui.use(['layer', 'form', 'element', 'carousel', 'http', 'jquery'], function () {
|
|
|
|
|
|
|
|
|
|
// 使用 layui 加载所需的模块
|
|
|
|
|
layui.use(['layer', 'form', 'element', 'carousel', 'http', 'jquery'
|
|
|
|
|
], function () {
|
|
|
|
|
// 从 layui 中获取所需的模块实例
|
|
|
|
|
var layer = layui.layer;
|
|
|
|
|
var element = layui.element;
|
|
|
|
|
var form = layui.form;
|
|
|
|
@ -608,75 +726,86 @@
|
|
|
|
|
var http = layui.http;
|
|
|
|
|
var jquery = layui.jquery;
|
|
|
|
|
|
|
|
|
|
// 获取轮播图 数据
|
|
|
|
|
// 发送 HTTP 请求获取轮播图数据
|
|
|
|
|
http.request('config/list', 'get', {
|
|
|
|
|
page: 1,
|
|
|
|
|
limit: 5
|
|
|
|
|
}, function (res) {
|
|
|
|
|
if (res.data.list.length > 0) {
|
|
|
|
|
let swiperList = [];
|
|
|
|
|
res.data.list.forEach(element => {
|
|
|
|
|
if(element.value != null
|
|
|
|
|
)
|
|
|
|
|
{
|
|
|
|
|
swiperList.push({
|
|
|
|
|
img: element.value
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
;
|
|
|
|
|
|
|
|
|
|
vue.swiperList = swiperList;
|
|
|
|
|
|
|
|
|
|
vue.$nextTick(() => {
|
|
|
|
|
carousel.render({
|
|
|
|
|
elem: '#test1',
|
|
|
|
|
width: '100%',
|
|
|
|
|
height: '450px',
|
|
|
|
|
arrow: 'hover',
|
|
|
|
|
anim: 'default',
|
|
|
|
|
autoplay: 'true',
|
|
|
|
|
interval: '3000',
|
|
|
|
|
indicator: 'inside'
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// vue.$nextTick(()=>{
|
|
|
|
|
// window.xznSlide();
|
|
|
|
|
// });
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
page: 1,
|
|
|
|
|
limit: 5
|
|
|
|
|
}, function (res) {
|
|
|
|
|
// 检查响应数据中列表是否有内容
|
|
|
|
|
if (res.data.list.length > 0) {
|
|
|
|
|
// 用于存储轮播图数据的数组
|
|
|
|
|
let swiperList = [];
|
|
|
|
|
// 遍历响应数据中的列表项
|
|
|
|
|
res.data.list.forEach(element => {
|
|
|
|
|
// 检查当前项的 value 属性是否不为 null
|
|
|
|
|
if (element.value != null) {
|
|
|
|
|
// 将符合条件的项添加到 swiperList 数组中
|
|
|
|
|
swiperList.push({
|
|
|
|
|
img: element.value
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 将处理后的轮播图数据赋值给 Vue 实例的 swiperList
|
|
|
|
|
vue.swiperList = swiperList;
|
|
|
|
|
|
|
|
|
|
// 等待 Vue 实例更新 DOM 后执行回调函数
|
|
|
|
|
vue.$nextTick(() => {
|
|
|
|
|
// 渲染轮播图组件
|
|
|
|
|
carousel.render({
|
|
|
|
|
elem: '#test1',
|
|
|
|
|
width: '100%',
|
|
|
|
|
height: '450px',
|
|
|
|
|
arrow: 'hover',
|
|
|
|
|
anim: 'default',
|
|
|
|
|
autoplay: 'true',
|
|
|
|
|
interval: '3000',
|
|
|
|
|
indicator: 'inside'
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 注释掉的代码,原本用于调用自定义的幻灯片函数
|
|
|
|
|
// vue.$nextTick(() => {
|
|
|
|
|
// window.xznSlide();
|
|
|
|
|
// });
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 发送 HTTP 请求获取新闻列表数据
|
|
|
|
|
http.request('news/list', 'get', {
|
|
|
|
|
page: 1,
|
|
|
|
|
limit: 8,
|
|
|
|
|
}, function (res) {
|
|
|
|
|
vue.newsList = res.data.list;
|
|
|
|
|
page: 1,
|
|
|
|
|
limit: 8,
|
|
|
|
|
}, function (res) {
|
|
|
|
|
// 将响应数据中的列表赋值给 Vue 实例的 newsList
|
|
|
|
|
vue.newsList = res.data.list;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
// 发送 HTTP 请求获取医生列表数据
|
|
|
|
|
http.request('yisheng/list', 'get', {
|
|
|
|
|
page: 1,
|
|
|
|
|
limit: 8,
|
|
|
|
|
}, function (res) {
|
|
|
|
|
vue.yishengList = res.data.list;
|
|
|
|
|
page: 1,
|
|
|
|
|
limit: 8,
|
|
|
|
|
}, function (res) {
|
|
|
|
|
// 将响应数据中的列表赋值给 Vue 实例的 yishengList
|
|
|
|
|
vue.yishengList = res.data.list;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
// 发送 HTTP 请求获取健康教育列表数据
|
|
|
|
|
http.request('jiankangjiaoyu/list', 'get', {
|
|
|
|
|
page: 1,
|
|
|
|
|
limit: 8,
|
|
|
|
|
jiankangjiaoyuDelete: 1,
|
|
|
|
|
}, function (res) {
|
|
|
|
|
vue.jiankangjiaoyuList = res.data.list;
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
page: 1,
|
|
|
|
|
limit: 8,
|
|
|
|
|
jiankangjiaoyuDelete: 1,
|
|
|
|
|
}, function (res) {
|
|
|
|
|
// 将响应数据中的列表赋值给 Vue 实例的 jiankangjiaoyuList
|
|
|
|
|
vue.jiankangjiaoyuList = res.data.list;
|
|
|
|
|
});
|
|
|
|
|
})
|
|
|
|
|
;
|
|
|
|
|
|
|
|
|
|
window.xznSlide = function () {
|
|
|
|
|
// 定义自定义的幻灯片函数
|
|
|
|
|
window.xznSlide = function () {
|
|
|
|
|
// 注释掉的代码,原本用于初始化 .banner 元素的幻灯片效果
|
|
|
|
|
// jQuery(".banner").slide({mainCell:".bd ul",autoPlay:true,interTime:5000});
|
|
|
|
|
// 初始化 #ifocus 元素的图片幻灯片效果
|
|
|
|
|
jQuery("#ifocus").slide({
|
|
|
|
|
titCell: "#ifocus_btn li",
|
|
|
|
|
mainCell: "#ifocus_piclist ul",
|
|
|
|
@ -685,18 +814,20 @@
|
|
|
|
|
autoPlay: true,
|
|
|
|
|
triggerTime: 0
|
|
|
|
|
});
|
|
|
|
|
// 初始化 #ifocus 元素的文本幻灯片效果
|
|
|
|
|
jQuery("#ifocus").slide({titCell: "#ifocus_btn li", mainCell: "#ifocus_tx ul", delayTime: 0, autoPlay: true});
|
|
|
|
|
// 初始化 .product_list 元素的幻灯片效果
|
|
|
|
|
jQuery(".product_list").slide({
|
|
|
|
|
mainCell: ".bd ul",
|
|
|
|
|
autoPage: true,
|
|
|
|
|
effect: "leftLoop",
|
|
|
|
|
autoPlay: true,
|
|
|
|
|
vis: 5,
|
|
|
|
|
trigger: "click",
|
|
|
|
|
interTime: 4000
|
|
|
|
|
});
|
|
|
|
|
mainCell: ".bd ul",
|
|
|
|
|
autoPage: true,
|
|
|
|
|
effect: "leftLoop",
|
|
|
|
|
autoPlay: true,
|
|
|
|
|
vis: 5,
|
|
|
|
|
trigger: "click",
|
|
|
|
|
interTime: 4000
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
<script src="../../xznstatic/js/index.js"></script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
</html>
|