基于Web+SpringBoot的旅游服务管理系统设计与实现

原创 于 2025-07-14 11:07:33 发布 · 313 阅读 · 10 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#spring boot #Web #vue #旅游服务管理系统 #毕业设计 #源码 #论文

目　　录
目　　录 I
1绪 论 1
1.1开发背景 1
1.2开发目的与意义 1
1.2.1开发目的 1
1.2.2开发意义 2
1.3本文研究内容 2
2开发技术 3
2.1 Java语言 3
2.2 MySql简介 3
2.3 Spring Boot框架 3
2.4 B/S架构 4
3系统分析 6
3.1可行性分析 6
3.1.1技术可行性分析 6
3.1.2经济可行性分析 6
3.1.3法律可行性分析 6
3.2系统性能分析 6
3.3功能需求分析 7
3.4系统流程分析 8
4系统设计 10
4.1功能模块设计 10
4.2数据库设计 10
4.2.1数据库设计原则 10
4.2.2系统E-R图 10
4.2.3数据库表设计 12
5系统实现 17
5.1 前台用户功能模块 17
5.2 后台管理员功能模块 21
6系统测试 23
6.1系统测试内容 23
6.1.1登录测试 23
6.1.2角色测试 23
6.1.3性能测试 24
6.2测试用例执行结果 24
结 论 25
参考文献 26
致谢 28
3.3功能需求分析
系统的目标是为管理员和用户搭建一个网上沟通平台，保证双方的安全，并使双方的利益最大化。
3.3.1管理员需求分析
管理员端的功能主要是开放给系统的管理人员使用，能够对用户的信息进行管理，包括对景点门票、门票预订、门票退订、客房类型、酒店客房、客房预订、客房退订、特色美食、美食订单、美食退订、旅游线路、线路订单、线路退订、旅游论坛进行查看，修改和删除、新增等，对系统整体运行情况进行了解。
管理员用例分析图，如图3-1所示。

图3-1管理员用例分析图

3.3.2用户需求分析
用户的功能主要是对个人账号和密码进行更新管理，对首页、景点门票、酒店客房、特色美食、旅游路线、旅游论坛、旅游攻略、个人中心进行查询详情操作。
用户用例分析图，如图3-2所示。

图3-2用户用例分析图
3.4系统流程分析
在本系统，非本系统的用户要想进行旅游服务管理系统就要注册本系统，登录时需要填写相应的资料，如有使用者，则会显示使用者名称已经存在，请再次键入使用者名称的提示框，若使用者不存在，则填写密码、确认密码等资料，并由系统判定密码与确认密码相符，确认无误后，填写使用者所填写的资料，即可进行登记。而且，为了保证系统的安全，只有在登录了本系统以后，才能进入系统后台操作。

<template>
<div class="home-preview" :style='{"width":"100%","margin":"0px auto","flexDirection":"column","display":"flex"}'>

	<!-- 搜索 -->
	<div id="search" class="search animate__animated" :style='{"padding":"30px","margin":"0 0 10px","flexWrap":"wrap","background":"#fff","display":"none","width":"100%","height":"auto"}'>
		<div :style='{"margin":"0 10px 0 0"}' class="select">
			<el-select v-model="queryIndex">
				<el-option
				  v-for="(item,index) in queryList"
				  :key="index"
				  :label="item.queryName"
				  :value="index"
				></el-option>
			</el-select>
		</div>
		<div :style='{"margin":"0 10px 0 0"}' class="input" v-if="queryIndex==0">
			<el-input v-model="tesemeishimeishimingcheng" placeholder="美食名称"></el-input>
		</div>
		<div :style='{"margin":"0"}' class="btn" v-if="queryIndex==0">
			<el-button :style='{"border":"0","cursor":"pointer","padding":"0 10px","margin":"0","outline":"none","color":"rgba(255, 255, 255, 1)","borderRadius":"4px","background":"rgba(64, 158, 255, 1)","width":"auto","lineHeight":"44px","fontSize":"14px","height":"44px"}' type="primary" @click="search('tesemeishi')">
				<span class="icon iconfont icon-fangdajing07" :style='{"color":"rgba(255, 255, 255, 1)","margin":"0 4px 0 0","fontSize":"14px"}'></span>
				搜索
			</el-button>
		</div>
		<div :style='{"margin":"0 10px 0 0"}' class="input" v-if="queryIndex==1">
			<el-input v-model="lvyouxianluxianlumingcheng" placeholder="线路名称"></el-input>
		</div>
		<div :style='{"margin":"0"}' class="btn" v-if="queryIndex==1">
			<el-button :style='{"border":"0","cursor":"pointer","padding":"0 10px","margin":"0","outline":"none","color":"rgba(255, 255, 255, 1)","borderRadius":"4px","background":"rgba(64, 158, 255, 1)","width":"auto","lineHeight":"44px","fontSize":"14px","height":"44px"}' type="primary" @click="search('lvyouxianlu')">
				<span class="icon iconfont icon-fangdajing07" :style='{"color":"rgba(255, 255, 255, 1)","margin":"0 4px 0 0","fontSize":"14px"}'></span>
				搜索
			</el-button>
		</div>
	</div>
	<!-- 搜索 -->



		
	<!-- 新闻资讯 -->
	<div id="animate_newsnews" class="news animate__animated" :style='{"padding":"40px 0 50px","margin":"0","position":"relative","background":"#fff"}'>
		<div v-if="false" class="idea newsIdea" :style='{"padding":"20px","flexWrap":"wrap","background":"#efefef","justifyContent":"space-between","display":"flex"}'>
			<div class="box1" :style='{"width":"20%","background":"#fff","height":"80px"}'></div>
			<div class="box2" :style='{"width":"20%","background":"#fff","height":"80px"}'></div>
			<div class="box3" :style='{"width":"20%","background":"#fff","height":"80px"}'></div>
			<div class="box4" :style='{"width":"20%","background":"#fff","height":"80px"}'></div>
			<div class="box5" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
			<div class="box6" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
			<div class="box7" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
			<div class="box8" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
			<div class="box9" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
			<div class="box10" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		</div>
		
		<div class="title" :style='{"width":"80%","boxShadow":"0 5px 0 #654B3C","margin":"10px auto","textAlign":"left"}'>
			<span :style='{"color":"#654B3C","fontSize":"54px"}'>旅游攻略</span>
		</div>
		
			
			
			
			
			
			
			
			
			
			
		








		<div v-if="newsList.length" class="list list19 index-pv1" :style='{"padding":"0px","margin":"40px auto","display":"flex","width":"80%","justifyContent":"space-between","height":"auto","order":"0"}'>
		  <div :style='{"width":"60%","padding":"0 0px","background":"#fff","justifyContent":"space-between","display":"flex","height":"auto"}' class="left">
			<template v-for="(item,index) in newsList">
		    <div v-if="index < 2" :style='{"border":"1px solid #654B3C","width":"49%","padding":"22px","overflow":"hidden","background":"#fff","height":"360px"}' class="item list-item animation-box" @click="toDetail('newsDetail', item)">
		      <img :style='{"width":"100%","objectFit":"cover","display":"block","height":"275px"}' :src="baseUrl + item.picture">
		      <div class="title">{{item.title}}</div>
		      <div :style='{"padding":"0px 10px","lineHeight":"25px","fontSize":"14px","overflow":"hideen","color":"#9E9E9E","height":"25px"}' class="desc">{{item.introduction}}</div>
		    </div>
			</template>
		  </div>
		  <div :style='{"border":"1px solid #654B3C","padding":"0 10px","overflow":"hidden","background":"#fff","flexDirection":"column","display":"flex","width":"38%","height":"360px"}' class="right">
			<template v-for="(item,index) in newsList">
		    <div v-if="index > 1" :style='{"cursor":"pointer","width":"100%","overflow":"hidden","alignItems":"center","display":"flex","height":"45px"}' class="item" @click="toDetail('newsDetail', item)">
		      <div class="dian"></div>
		      <div class="title">{{item.title}}</div>
		      <div class="time" :style='{"padding":"0 6px"}'>
		        <span class="icon iconfont icon-shijian21"></span>
		        <span class="text" >{{item.addtime}}</span>
		      </div>
		    </div>
			</template>
		  </div>
		</div>



		<div @click="moreBtn('news')" :style='{"border":"0","margin":"10px auto","top":"60px","textAlign":"center","display":"block","width":"80px","lineHeight":"32px","position":"absolute","right":"10%"}'>
			<span :style='{"color":"#9E9E9E","fontSize":"24px"}'>更多</span>
			<i :style='{"color":"#9E9E9E","fontSize":"24px"}' class="icon iconfont icon-gengduo1"></i>
		</div>
		
		</div>
	<!-- 新闻资讯 -->


<!-- 商品推荐 -->
<div id="animate_recommendlvyouxianlu" class="recommend animate__animated" :style='{"padding":"50px 0","margin":"0","position":"relative","background":"#f1f1f1","order":"1"}'>
	<div v-if="false" class="idea recommendIdea" :style='{"padding":"20px","flexWrap":"wrap","background":"#efefef","justifyContent":"space-between","display":"flex"}'>
		<div class="box1" :style='{"width":"20%","background":"#fff","height":"80px"}'></div>
		<div class="box2" :style='{"width":"20%","background":"#fff","height":"80px"}'></div>
		<div class="box3" :style='{"width":"20%","background":"#fff","height":"80px"}'></div>
		<div class="box4" :style='{"width":"20%","background":"#fff","height":"80px"}'></div>
		<div class="box5" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box6" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box7" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box8" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box9" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box10" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
	</div>
	
    <div class="title" :style='{"width":"80%","boxShadow":"0 5px 0 #654B3C","margin":"10px auto"}'>
		<span :style='{"color":"#654B3C","fontSize":"54px"}'>旅游线路推荐</span>
	</div>
	
	
	
	
	
	
	
	
	
	



	<div v-if="lvyouxianluRecommend.length" class="list list12 index-pv1 list12lvyouxianlu" :style='{"width":"80%","padding":"10px 0","margin":"0 auto","height":"auto"}'>
	  <div class="list" :style='{"overflow":"hidden","flex":"1","justifyContent":"space-around","display":"flex","height":"auto"}'>
	    <div :style='{"width":"16%","position":"relative","background":"#fff","height":"250px"}' class="item list-item animation-box" v-for="item,index in lvyouxianluRecommend" :key="index" @click="toDetail('lvyouxianluDetail', item)">
			<img :name="item.id" :style='{"width":"100%","objectFit":"cover","display":"block","height":"190px"}' v-if="preHttp(item.tupian)" :src="item.tupian.split(',')[0]" alt="" />
			<img :name="item.id" :style='{"width":"100%","objectFit":"cover","display":"block","height":"190px"}' v-else :src="baseUrl + (item.tupian?item.tupian.split(',')[0]:'')" alt="" />
			<div class="line1" :style='{"padding":"0 10px","overflow":"hidden","color":"#333","textAlign":"center","lineHeight":"30px","fontSize":"18px","height":"30px"}'>{{item.xianlumingcheng}}</div>
			<div class="line1" :style='{"padding":"0 10px","overflow":"hidden","color":"#333","textAlign":"center","lineHeight":"30px","fontSize":"18px","height":"30px"}'>价格:{{item.jiage}}</div>
			<div class="line1" :style='{"padding":"0 10px","overflow":"hidden","color":"#333","textAlign":"center","lineHeight":"30px","fontSize":"18px","height":"30px"}'>交通方式:{{item.jiaotongfangshi}}</div>
	    </div>
	  </div>
	</div>




	
	<div @click="moreBtn('lvyouxianlu')" :style='{"border":"0","margin":"10px auto","top":"80px","textAlign":"center","display":"block","width":"80px","lineHeight":"32px","position":"absolute","right":"10%"}'>
		<span :style='{"color":"#9E9E9E","fontSize":"24px"}'>更多</span>
		<i :style='{"color":"#9E9E9E","fontSize":"24px"}' class="icon iconfont icon-gengduo1"></i>
	</div>
	
</div>
<!-- 商品推荐 -->


<!-- 特价商品 -->
<div id="animate_listjingdianmenpiao" class="lists animate__animated" :style='{"padding":"50px 0 0","margin":"0","position":"relative","background":"#f1f1f1","order":"2"}'>
	
	<div class="title" :style='{"width":"80%","boxShadow":"0 5px 0 #654B3C","margin":"10px auto"}'>
	  <span :style='{"color":"#654B3C","fontSize":"54px"}'>景点门票展示</span>
	</div>
	
	
	
	
	
	
	
	
	
	






	<div class="list list15 index-pv1" :style='{"padding":"0px","margin":"20px auto 30px","alignItems":"center","display":"flex","width":"80%","justifyContent":"center","height":"auto"}'>
	  <div :style='{"width":"39%","height":"auto"}' class="list left">
		<template v-if="jingdianmenpiaoList.length">
	    <template v-for="item,index in jingdianmenpiaoList">
		<div v-if="index == 0" @click="toDetail('jingdianmenpiaoDetail', item)" :style='{"width":"100%","margin":"10px 0","position":"relative","background":"#fff","height":"auto"}' class="box1 list-item animation-box">
		  <img :name="item.id" :style='{"width":"100% ","objectFit":"cover","display":"block","height":"180px"}' v-if="preHttp(item.jingdiantupian)" :src="item.jingdiantupian.split(',')[0]" alt="" />
		  <img :name="item.id" :style='{"width":"100% ","objectFit":"cover","display":"block","height":"180px"}' v-else :src="baseUrl + (item.jingdiantupian?item.jingdiantupian.split(',')[0]:'')" alt="" />
		  <div class="info">
			<div class="line1" :style='{"color":"#fff","fontSize":"24px","lineHeight":"54px"}'>{{item.jingdianmingcheng}}</div>
			<div class="line1" :style='{"color":"#fff","fontSize":"24px","lineHeight":"54px"}'>景点等级:{{item.jingdiandengji}}</div>
	      </div>
	    </div>
		</template>
		</template>
		<template v-if="jingdianmenpiaoList.length > 1">
		<template v-for="item,index in jingdianmenpiaoList">
	    <div v-if="index == 1" @click="toDetail('jingdianmenpiaoDetail', item)" :style='{"width":"100%","margin":"10px 0","position":"relative","background":"#fff","height":"auto"}' class="box2 list-item animation-box">
		  <img :name="item.id" :style='{"width":"100% ","objectFit":"cover","display":"block","height":"180px"}' v-if="preHttp(item.jingdiantupian)" :src="item.jingdiantupian.split(',')[0]" alt="" />
		  <img :name="item.id" :style='{"width":"100% ","objectFit":"cover","display":"block","height":"180px"}' v-else :src="baseUrl + (item.jingdiantupian?item.jingdiantupian.split(',')[0]:'')" alt="" />
		  <div class="info">
			<div class="line1" :style='{"color":"#fff","fontSize":"24px","lineHeight":"54px"}'>{{item.jingdianmingcheng}}</div>
			<div class="line1" :style='{"color":"#fff","fontSize":"24px","lineHeight":"54px"}'>景点等级:{{item.jingdiandengji}}</div>
	      </div>
	    </div>
		</template>
		</template>
	  </div>
	  <div :style='{"width":"20%","margin":"0 2%","height":"auto"}' class="list center">
		<template v-if="jingdianmenpiaoList.length > 2">
		<template v-for="item,index in jingdianmenpiaoList">
	    <div v-if="index == 2" @click="toDetail('jingdianmenpiaoDetail', item)" :style='{"width":"100%","margin":"10px 0","position":"relative","background":"#fff","height":"auto"}' class="box1 list-item animation-box">
		  <img :name="item.id" :style='{"width":"100% ","objectFit":"cover","display":"block","height":"160px"}' v-if="preHttp(item.jingdiantupian)" :src="item.jingdiantupian.split(',')[0]" alt="" />
		  <img :name="item.id" :style='{"width":"100% ","objectFit":"cover","display":"block","height":"160px"}' v-else :src="baseUrl + (item.jingdiantupian?item.jingdiantupian.split(',')[0]:'')" alt="" />
		  <div class="info">
			<div class="line1" :style='{"color":"#fff","fontSize":"24px","lineHeight":"54px"}'>{{item.jingdianmingcheng}}</div>
			<div class="line1" :style='{"color":"#fff","fontSize":"24px","lineHeight":"54px"}'>景点等级:{{item.jingdiandengji}}</div>
		  </div>
	    </div>
		</template>
		</template>
	    <div :style='{"padding":"0","margin":"10px auto","alignItems":"center","borderRadius":"50%","background":"#654B3C","flexDirection":"column","display":"flex","width":"220px","justifyContent":"center","height":"220px"}' class="box2">
	      <div :style='{"padding":"0 15px","fontSize":"22px","lineHeight":"30px","overflow":"hidden","color":"#fff","height":"60px"}' class="title">{{jingdianmenpiaoList[2].jingdianmingcheng}}</div>
	      <div :style='{"padding":"0 15px","fontSize":"16px","lineHeight":"30px","overflow":"hidden","color":"#fff","height":"60px"}' class="desc">{{jingdianmenpiaoList[2].zhuyishixiang}}</div>
	    </div>
		<template v-if="jingdianmenpiaoList.length > 3">
		<template v-for="item,index in jingdianmenpiaoList">
	    <div v-if="index == 3" @click="toDetail('jingdianmenpiaoDetail', item)" :style='{"width":"100%","margin":"10px 0","position":"relative","background":"#fff","height":"auto"}' class="box3 list-item animation-box">
		  <img :name="item.id" :style='{"width":"100% ","objectFit":"cover","display":"block","height":"160px"}' v-if="preHttp(item.jingdiantupian)" :src="item.jingdiantupian.split(',')[0]" alt="" />
		  <img :name="item.id" :style='{"width":"100% ","objectFit":"cover","display":"block","height":"160px"}' v-else :src="baseUrl + (item.jingdiantupian?item.jingdiantupian.split(',')[0]:'')" alt="" />
		  <div class="info">
			<div class="line1" :style='{"color":"#fff","fontSize":"24px","lineHeight":"54px"}'>{{item.jingdianmingcheng}}</div>
			<div class="line1" :style='{"color":"#fff","fontSize":"24px","lineHeight":"54px"}'>景点等级:{{item.jingdiandengji}}</div>
		  </div>
	    </div>
		</template>
		</template>
	  </div>
	  <div :style='{"width":"39%","height":"auto"}' class="list right">
	    <template v-if="jingdianmenpiaoList.length > 4">
	    <template v-for="item,index in jingdianmenpiaoList">
	    <div v-if="index == 4" @click="toDetail('jingdianmenpiaoDetail', item)" :style='{"width":"100%","margin":"10px 0","position":"relative","background":"#fff","height":"auto"}' class="box1 list-item animation-box">
		  <img :name="item.id" :style='{"width":"100% ","objectFit":"cover","display":"block","height":"180px"}' v-if="preHttp(item.jingdiantupian)" :src="item.jingdiantupian.split(',')[0]" alt="" />
		  <img :name="item.id" :style='{"width":"100% ","objectFit":"cover","display":"block","height":"180px"}' v-else :src="baseUrl + (item.jingdiantupian?item.jingdiantupian.split(',')[0]:'')" alt="" />
		  <div class="info">
			<div class="line1" :style='{"color":"#fff","fontSize":"24px","lineHeight":"54px"}'>{{item.jingdianmingcheng}}</div>
			<div class="line1" :style='{"color":"#fff","fontSize":"24px","lineHeight":"54px"}'>景点等级:{{item.jingdiandengji}}</div>
	      </div>
	    </div>
		</template>
		</template>
		<template v-if="jingdianmenpiaoList.length > 5">
		<template v-for="item,index in jingdianmenpiaoList">
	    <div v-if="index == 5" @click="toDetail('jingdianmenpiaoDetail', item)" :style='{"width":"100%","margin":"10px 0","position":"relative","background":"#fff","height":"auto"}' class="box2 list-item animation-box">
		  <img :name="item.id" :style='{"width":"100% ","objectFit":"cover","display":"block","height":"180px"}' v-if="preHttp(item.jingdiantupian)" :src="item.jingdiantupian.split(',')[0]" alt="" />
		  <img :name="item.id" :style='{"width":"100% ","objectFit":"cover","display":"block","height":"180px"}' v-else :src="baseUrl + (item.jingdiantupian?item.jingdiantupian.split(',')[0]:'')" alt="" />
	      <div class="info">
			<div class="line1" :style='{"color":"#fff","fontSize":"24px","lineHeight":"54px"}'>{{item.jingdianmingcheng}}</div>
			<div class="line1" :style='{"color":"#fff","fontSize":"24px","lineHeight":"54px"}'>景点等级:{{item.jingdiandengji}}</div>
	      </div>
	    </div>
		</template>
		</template>
	  </div>
	</div>
	
	
	<div @click="moreBtn('jingdianmenpiao')" :style='{"border":"0","margin":"10px auto","top":"80px","textAlign":"center","display":"block","width":"80px","lineHeight":"32px","position":"absolute","right":"10%"}'>
		<span :style='{"color":"#9E9E9E","fontSize":"24px"}'>更多</span>
		<i :style='{"color":"#9E9E9E","fontSize":"24px"}' class="icon iconfont icon-gengduo1"></i>
	</div>
	
	<div v-if="true" class="idea" :style='{"backgroundSize":"100% 100%","flexWrap":"wrap","backgroundImage":"url(http://codegen.caihongy.cn/20231114/860fdc8ab9484bc0909d0f94f81dd5ac.png)","justifyContent":"space-between","display":"flex","height":"210px"}'>
		<div class="box1" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box2" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box3" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box4" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box5" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box6" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box7" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box8" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box9" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box10" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
	</div>

</div>
<!-- 特价商品 -->

<!-- 特价商品 -->
<div id="animate_listjiudiankefang" class="lists animate__animated" :style='{"padding":"50px 0 0","margin":"0","position":"relative","background":"#f1f1f1","order":"2"}'>
	
	<div class="title" :style='{"width":"80%","boxShadow":"0 5px 0 #654B3C","margin":"10px auto"}'>
	  <span :style='{"color":"#654B3C","fontSize":"54px"}'>酒店客房展示</span>
	</div>
	
	
	
	
	
	
	
	
	
	






	<div class="list list15 index-pv1" :style='{"padding":"0px","margin":"20px auto 30px","alignItems":"center","display":"flex","width":"80%","justifyContent":"center","height":"auto"}'>
	  <div :style='{"width":"39%","height":"auto"}' class="list left">
		<template v-if="jiudiankefangList.length">
	    <template v-for="item,index in jiudiankefangList">
		<div v-if="index == 0" @click="toDetail('jiudiankefangDetail', item)" :style='{"width":"100%","margin":"10px 0","position":"relative","background":"#fff","height":"auto"}' class="box1 list-item animation-box">
		  <img :name="item.id" :style='{"width":"100% ","objectFit":"cover","display":"block","height":"180px"}' v-if="preHttp(item.kefangtupian)" :src="item.kefangtupian.split(',')[0]" alt="" />
		  <img :name="item.id" :style='{"width":"100% ","objectFit":"cover","display":"block","height":"180px"}' v-else :src="baseUrl + (item.kefangtupian?item.kefangtupian.split(',')[0]:'')" alt="" />
		  <div class="info">
			<div class="line1" :style='{"color":"#fff","fontSize":"24px","lineHeight":"54px"}'>{{item.kefangmingcheng}}</div>
			<div class="line1" :style='{"color":"#fff","fontSize":"24px","lineHeight":"54px"}'>客房状态:{{item.kefangzhuangtai}}</div>
	      </div>
	    </div>
		</template>
		</template>
		<template v-if="jiudiankefangList.length > 1">
		<template v-for="item,index in jiudiankefangList">
	    <div v-if="index == 1" @click="toDetail('jiudiankefangDetail', item)" :style='{"width":"100%","margin":"10px 0","position":"relative","background":"#fff","height":"auto"}' class="box2 list-item animation-box">
		  <img :name="item.id" :style='{"width":"100% ","objectFit":"cover","display":"block","height":"180px"}' v-if="preHttp(item.kefangtupian)" :src="item.kefangtupian.split(',')[0]" alt="" />
		  <img :name="item.id" :style='{"width":"100% ","objectFit":"cover","display":"block","height":"180px"}' v-else :src="baseUrl + (item.kefangtupian?item.kefangtupian.split(',')[0]:'')" alt="" />
		  <div class="info">
			<div class="line1" :style='{"color":"#fff","fontSize":"24px","lineHeight":"54px"}'>{{item.kefangmingcheng}}</div>
			<div class="line1" :style='{"color":"#fff","fontSize":"24px","lineHeight":"54px"}'>客房状态:{{item.kefangzhuangtai}}</div>
	      </div>
	    </div>
		</template>
		</template>
	  </div>
	  <div :style='{"width":"20%","margin":"0 2%","height":"auto"}' class="list center">
		<template v-if="jiudiankefangList.length > 2">
		<template v-for="item,index in jiudiankefangList">
	    <div v-if="index == 2" @click="toDetail('jiudiankefangDetail', item)" :style='{"width":"100%","margin":"10px 0","position":"relative","background":"#fff","height":"auto"}' class="box1 list-item animation-box">
		  <img :name="item.id" :style='{"width":"100% ","objectFit":"cover","display":"block","height":"160px"}' v-if="preHttp(item.kefangtupian)" :src="item.kefangtupian.split(',')[0]" alt="" />
		  <img :name="item.id" :style='{"width":"100% ","objectFit":"cover","display":"block","height":"160px"}' v-else :src="baseUrl + (item.kefangtupian?item.kefangtupian.split(',')[0]:'')" alt="" />
		  <div class="info">
			<div class="line1" :style='{"color":"#fff","fontSize":"24px","lineHeight":"54px"}'>{{item.kefangmingcheng}}</div>
			<div class="line1" :style='{"color":"#fff","fontSize":"24px","lineHeight":"54px"}'>客房状态:{{item.kefangzhuangtai}}</div>
		  </div>
	    </div>
		</template>
		</template>
	    <div :style='{"padding":"0","margin":"10px auto","alignItems":"center","borderRadius":"50%","background":"#654B3C","flexDirection":"column","display":"flex","width":"220px","justifyContent":"center","height":"220px"}' class="box2">
	      <div :style='{"padding":"0 15px","fontSize":"22px","lineHeight":"30px","overflow":"hidden","color":"#fff","height":"60px"}' class="title">{{jiudiankefangList[2].kefangmingcheng}}</div>
	      <div :style='{"padding":"0 15px","fontSize":"16px","lineHeight":"30px","overflow":"hidden","color":"#fff","height":"60px"}' class="desc">{{jiudiankefangList[2].kefangjieshao}}</div>
	    </div>
		<template v-if="jiudiankefangList.length > 3">
		<template v-for="item,index in jiudiankefangList">
	    <div v-if="index == 3" @click="toDetail('jiudiankefangDetail', item)" :style='{"width":"100%","margin":"10px 0","position":"relative","background":"#fff","height":"auto"}' class="box3 list-item animation-box">
		  <img :name="item.id" :style='{"width":"100% ","objectFit":"cover","display":"block","height":"160px"}' v-if="preHttp(item.kefangtupian)" :src="item.kefangtupian.split(',')[0]" alt="" />
		  <img :name="item.id" :style='{"width":"100% ","objectFit":"cover","display":"block","height":"160px"}' v-else :src="baseUrl + (item.kefangtupian?item.kefangtupian.split(',')[0]:'')" alt="" />
		  <div class="info">
			<div class="line1" :style='{"color":"#fff","fontSize":"24px","lineHeight":"54px"}'>{{item.kefangmingcheng}}</div>
			<div class="line1" :style='{"color":"#fff","fontSize":"24px","lineHeight":"54px"}'>客房状态:{{item.kefangzhuangtai}}</div>
		  </div>
	    </div>
		</template>
		</template>
	  </div>
	  <div :style='{"width":"39%","height":"auto"}' class="list right">
	    <template v-if="jiudiankefangList.length > 4">
	    <template v-for="item,index in jiudiankefangList">
	    <div v-if="index == 4" @click="toDetail('jiudiankefangDetail', item)" :style='{"width":"100%","margin":"10px 0","position":"relative","background":"#fff","height":"auto"}' class="box1 list-item animation-box">
		  <img :name="item.id" :style='{"width":"100% ","objectFit":"cover","display":"block","height":"180px"}' v-if="preHttp(item.kefangtupian)" :src="item.kefangtupian.split(',')[0]" alt="" />
		  <img :name="item.id" :style='{"width":"100% ","objectFit":"cover","display":"block","height":"180px"}' v-else :src="baseUrl + (item.kefangtupian?item.kefangtupian.split(',')[0]:'')" alt="" />
		  <div class="info">
			<div class="line1" :style='{"color":"#fff","fontSize":"24px","lineHeight":"54px"}'>{{item.kefangmingcheng}}</div>
			<div class="line1" :style='{"color":"#fff","fontSize":"24px","lineHeight":"54px"}'>客房状态:{{item.kefangzhuangtai}}</div>
	      </div>
	    </div>
		</template>
		</template>
		<template v-if="jiudiankefangList.length > 5">
		<template v-for="item,index in jiudiankefangList">
	    <div v-if="index == 5" @click="toDetail('jiudiankefangDetail', item)" :style='{"width":"100%","margin":"10px 0","position":"relative","background":"#fff","height":"auto"}' class="box2 list-item animation-box">
		  <img :name="item.id" :style='{"width":"100% ","objectFit":"cover","display":"block","height":"180px"}' v-if="preHttp(item.kefangtupian)" :src="item.kefangtupian.split(',')[0]" alt="" />
		  <img :name="item.id" :style='{"width":"100% ","objectFit":"cover","display":"block","height":"180px"}' v-else :src="baseUrl + (item.kefangtupian?item.kefangtupian.split(',')[0]:'')" alt="" />
	      <div class="info">
			<div class="line1" :style='{"color":"#fff","fontSize":"24px","lineHeight":"54px"}'>{{item.kefangmingcheng}}</div>
			<div class="line1" :style='{"color":"#fff","fontSize":"24px","lineHeight":"54px"}'>客房状态:{{item.kefangzhuangtai}}</div>
	      </div>
	    </div>
		</template>
		</template>
	  </div>
	</div>
	
	
	<div @click="moreBtn('jiudiankefang')" :style='{"border":"0","margin":"10px auto","top":"80px","textAlign":"center","display":"block","width":"80px","lineHeight":"32px","position":"absolute","right":"10%"}'>
		<span :style='{"color":"#9E9E9E","fontSize":"24px"}'>更多</span>
		<i :style='{"color":"#9E9E9E","fontSize":"24px"}' class="icon iconfont icon-gengduo1"></i>
	</div>
	
	<div v-if="true" class="idea" :style='{"backgroundSize":"100% 100%","flexWrap":"wrap","backgroundImage":"url(http://codegen.caihongy.cn/20231114/860fdc8ab9484bc0909d0f94f81dd5ac.png)","justifyContent":"space-between","display":"flex","height":"210px"}'>
		<div class="box1" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box2" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box3" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box4" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box5" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box6" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box7" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box8" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box9" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box10" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
	</div>

</div>
<!-- 特价商品 -->

<!-- 特价商品 -->
<div id="animate_listtesemeishi" class="lists animate__animated" :style='{"padding":"50px 0 0","margin":"0","position":"relative","background":"#f1f1f1","order":"2"}'>
	
	<div class="title" :style='{"width":"80%","boxShadow":"0 5px 0 #654B3C","margin":"10px auto"}'>
	  <span :style='{"color":"#654B3C","fontSize":"54px"}'>特色美食展示</span>
	</div>
	
	
	
	
	
	
	
	
	
	






	<div class="list list15 index-pv1" :style='{"padding":"0px","margin":"20px auto 30px","alignItems":"center","display":"flex","width":"80%","justifyContent":"center","height":"auto"}'>
	  <div :style='{"width":"39%","height":"auto"}' class="list left">
		<template v-if="tesemeishiList.length">
	    <template v-for="item,index in tesemeishiList">
		<div v-if="index == 0" @click="toDetail('tesemeishiDetail', item)" :style='{"width":"100%","margin":"10px 0","position":"relative","background":"#fff","height":"auto"}' class="box1 list-item animation-box">
		  <img :name="item.id" :style='{"width":"100% ","objectFit":"cover","display":"block","height":"180px"}' v-if="preHttp(item.tupian)" :src="item.tupian.split(',')[0]" alt="" />
		  <img :name="item.id" :style='{"width":"100% ","objectFit":"cover","display":"block","height":"180px"}' v-else :src="baseUrl + (item.tupian?item.tupian.split(',')[0]:'')" alt="" />
		  <div class="info">
			<div class="line1" :style='{"color":"#fff","fontSize":"24px","lineHeight":"54px"}'>{{item.meishimingcheng}}</div>
			<div class="line1" :style='{"color":"#fff","fontSize":"24px","lineHeight":"54px"}'>口味:{{item.kouwei}}</div>
			<div class="line1" :style='{"color":"#fff","fontSize":"24px","lineHeight":"54px"}'>单价:{{item.danjia}}</div>
	      </div>
	    </div>
		</template>
		</template>
		<template v-if="tesemeishiList.length > 1">
		<template v-for="item,index in tesemeishiList">
	    <div v-if="index == 1" @click="toDetail('tesemeishiDetail', item)" :style='{"width":"100%","margin":"10px 0","position":"relative","background":"#fff","height":"auto"}' class="box2 list-item animation-box">
		  <img :name="item.id" :style='{"width":"100% ","objectFit":"cover","display":"block","height":"180px"}' v-if="preHttp(item.tupian)" :src="item.tupian.split(',')[0]" alt="" />
		  <img :name="item.id" :style='{"width":"100% ","objectFit":"cover","display":"block","height":"180px"}' v-else :src="baseUrl + (item.tupian?item.tupian.split(',')[0]:'')" alt="" />
		  <div class="info">
			<div class="line1" :style='{"color":"#fff","fontSize":"24px","lineHeight":"54px"}'>{{item.meishimingcheng}}</div>
			<div class="line1" :style='{"color":"#fff","fontSize":"24px","lineHeight":"54px"}'>口味:{{item.kouwei}}</div>
			<div class="line1" :style='{"color":"#fff","fontSize":"24px","lineHeight":"54px"}'>单价:{{item.danjia}}</div>
	      </div>
	    </div>
		</template>
		</template>
	  </div>
	  <div :style='{"width":"20%","margin":"0 2%","height":"auto"}' class="list center">
		<template v-if="tesemeishiList.length > 2">
		<template v-for="item,index in tesemeishiList">
	    <div v-if="index == 2" @click="toDetail('tesemeishiDetail', item)" :style='{"width":"100%","margin":"10px 0","position":"relative","background":"#fff","height":"auto"}' class="box1 list-item animation-box">
		  <img :name="item.id" :style='{"width":"100% ","objectFit":"cover","display":"block","height":"160px"}' v-if="preHttp(item.tupian)" :src="item.tupian.split(',')[0]" alt="" />
		  <img :name="item.id" :style='{"width":"100% ","objectFit":"cover","display":"block","height":"160px"}' v-else :src="baseUrl + (item.tupian?item.tupian.split(',')[0]:'')" alt="" />
		  <div class="info">
			<div class="line1" :style='{"color":"#fff","fontSize":"24px","lineHeight":"54px"}'>{{item.meishimingcheng}}</div>
			<div class="line1" :style='{"color":"#fff","fontSize":"24px","lineHeight":"54px"}'>口味:{{item.kouwei}}</div>
			<div class="line1" :style='{"color":"#fff","fontSize":"24px","lineHeight":"54px"}'>单价:{{item.danjia}}</div>
		  </div>
	    </div>
		</template>
		</template>
	    <div :style='{"padding":"0","margin":"10px auto","alignItems":"center","borderRadius":"50%","background":"#654B3C","flexDirection":"column","display":"flex","width":"220px","justifyContent":"center","height":"220px"}' class="box2">
	      <div :style='{"padding":"0 15px","fontSize":"22px","lineHeight":"30px","overflow":"hidden","color":"#fff","height":"60px"}' class="title">{{tesemeishiList[2].meishimingcheng}}</div>
	      <div :style='{"padding":"0 15px","fontSize":"16px","lineHeight":"30px","overflow":"hidden","color":"#fff","height":"60px"}' class="desc">{{tesemeishiList[2].meishixiangqing}}</div>
	    </div>
		<template v-if="tesemeishiList.length > 3">
		<template v-for="item,index in tesemeishiList">
	    <div v-if="index == 3" @click="toDetail('tesemeishiDetail', item)" :style='{"width":"100%","margin":"10px 0","position":"relative","background":"#fff","height":"auto"}' class="box3 list-item animation-box">
		  <img :name="item.id" :style='{"width":"100% ","objectFit":"cover","display":"block","height":"160px"}' v-if="preHttp(item.tupian)" :src="item.tupian.split(',')[0]" alt="" />
		  <img :name="item.id" :style='{"width":"100% ","objectFit":"cover","display":"block","height":"160px"}' v-else :src="baseUrl + (item.tupian?item.tupian.split(',')[0]:'')" alt="" />
		  <div class="info">
			<div class="line1" :style='{"color":"#fff","fontSize":"24px","lineHeight":"54px"}'>{{item.meishimingcheng}}</div>
			<div class="line1" :style='{"color":"#fff","fontSize":"24px","lineHeight":"54px"}'>口味:{{item.kouwei}}</div>
			<div class="line1" :style='{"color":"#fff","fontSize":"24px","lineHeight":"54px"}'>单价:{{item.danjia}}</div>
		  </div>
	    </div>
		</template>
		</template>
	  </div>
	  <div :style='{"width":"39%","height":"auto"}' class="list right">
	    <template v-if="tesemeishiList.length > 4">
	    <template v-for="item,index in tesemeishiList">
	    <div v-if="index == 4" @click="toDetail('tesemeishiDetail', item)" :style='{"width":"100%","margin":"10px 0","position":"relative","background":"#fff","height":"auto"}' class="box1 list-item animation-box">
		  <img :name="item.id" :style='{"width":"100% ","objectFit":"cover","display":"block","height":"180px"}' v-if="preHttp(item.tupian)" :src="item.tupian.split(',')[0]" alt="" />
		  <img :name="item.id" :style='{"width":"100% ","objectFit":"cover","display":"block","height":"180px"}' v-else :src="baseUrl + (item.tupian?item.tupian.split(',')[0]:'')" alt="" />
		  <div class="info">
			<div class="line1" :style='{"color":"#fff","fontSize":"24px","lineHeight":"54px"}'>{{item.meishimingcheng}}</div>
			<div class="line1" :style='{"color":"#fff","fontSize":"24px","lineHeight":"54px"}'>口味:{{item.kouwei}}</div>
			<div class="line1" :style='{"color":"#fff","fontSize":"24px","lineHeight":"54px"}'>单价:{{item.danjia}}</div>
	      </div>
	    </div>
		</template>
		</template>
		<template v-if="tesemeishiList.length > 5">
		<template v-for="item,index in tesemeishiList">
	    <div v-if="index == 5" @click="toDetail('tesemeishiDetail', item)" :style='{"width":"100%","margin":"10px 0","position":"relative","background":"#fff","height":"auto"}' class="box2 list-item animation-box">
		  <img :name="item.id" :style='{"width":"100% ","objectFit":"cover","display":"block","height":"180px"}' v-if="preHttp(item.tupian)" :src="item.tupian.split(',')[0]" alt="" />
		  <img :name="item.id" :style='{"width":"100% ","objectFit":"cover","display":"block","height":"180px"}' v-else :src="baseUrl + (item.tupian?item.tupian.split(',')[0]:'')" alt="" />
	      <div class="info">
			<div class="line1" :style='{"color":"#fff","fontSize":"24px","lineHeight":"54px"}'>{{item.meishimingcheng}}</div>
			<div class="line1" :style='{"color":"#fff","fontSize":"24px","lineHeight":"54px"}'>口味:{{item.kouwei}}</div>
			<div class="line1" :style='{"color":"#fff","fontSize":"24px","lineHeight":"54px"}'>单价:{{item.danjia}}</div>
	      </div>
	    </div>
		</template>
		</template>
	  </div>
	</div>
	
	
	<div @click="moreBtn('tesemeishi')" :style='{"border":"0","margin":"10px auto","top":"80px","textAlign":"center","display":"block","width":"80px","lineHeight":"32px","position":"absolute","right":"10%"}'>
		<span :style='{"color":"#9E9E9E","fontSize":"24px"}'>更多</span>
		<i :style='{"color":"#9E9E9E","fontSize":"24px"}' class="icon iconfont icon-gengduo1"></i>
	</div>
	
	<div v-if="true" class="idea" :style='{"backgroundSize":"100% 100%","flexWrap":"wrap","backgroundImage":"url(http://codegen.caihongy.cn/20231114/860fdc8ab9484bc0909d0f94f81dd5ac.png)","justifyContent":"space-between","display":"flex","height":"210px"}'>
		<div class="box1" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box2" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box3" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box4" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box5" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box6" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box7" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box8" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box9" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
		<div class="box10" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
	</div>

</div>
<!-- 特价商品 -->
	
</div>
</template>

<script>
import 'animate.css'
import Swiper from "swiper";

  export default {
    //数据集合
    data() {
      return {
        baseUrl: '',
        queryList:[
          {
              queryName:"美食名称",
          },
          {
              queryName:"线路名称",
          },
        ],
        queryIndex: 0,
        tesemeishimeishimingcheng: '',
        lvyouxianluxianlumingcheng: '',
        newsList: [],
        lvyouxianluRecommend: [],

        jingdianmenpiaoList: [],
        jiudiankefangList: [],
        tesemeishiList: [],




      }
    },
    created() {
		this.baseUrl = this.$config.baseUrl;
		this.getNewsList();
		this.getList();
    },
	mounted() {
		window.addEventListener('scroll', this.handleScroll)
		setTimeout(()=>{
			this.handleScroll()
		},100)
		
		this.swiperChanges()
	},
	beforeDestroy() {
	  window.removeEventListener('scroll', this.handleScroll)
	},
    //方法集合
    methods: {
		swiperChanges() {
			setTimeout(()=>{
			},750)
		},
		recommendIndexClick12(index, name) {
			this['recommendIndex12' + name] = index
			this.getList()
			
			document.querySelectorAll('.recommend .list12' + name + ' .list .item').forEach(el => {
			  el.classList.remove("active")
			})
			setTimeout(() => {
			  document.querySelectorAll('.recommend .list12' + name + ' .list .item').forEach(el => {
			    el.classList.add("active")
			  })
			}, 1);
		},


		handleScroll() {
			let arr = [
				{id:'search',css:'animate__bounce'},
				{id:'about',css:'animate__bounceIn'},
				{id:'system',css:'animate__bounceInUp'},
				{id:'animate_listjingdianmenpiao',css:'animate__jackInTheBox'},
				{id:'animate_listjiudiankefang',css:'animate__jackInTheBox'},
				{id:'animate_listtesemeishi',css:'animate__jackInTheBox'},
				{id:'animate_recommendlvyouxianlu',css:'animate__zoomInDown'},
				{id:'animate_newsnews',css:'animate__zoomIn'},
				{id:'msgs',css:'animate__tada'},
				{id:'friendly',css:'animate__bounce'}
			]
			
			for (let i in arr) {
				let doc = document.getElementById(arr[i].id)
				if (doc) {
					let top = doc.offsetTop
					let win_top = window.innerHeight + window.pageYOffset
					// console.log(top,win_top)
					if (win_top > top && doc.classList.value.indexOf(arr[i].css) < 0) {
						// console.log(doc)
						doc.classList.add(arr[i].css)
					}
				}
			}
		},
      preHttp(str) {
          return str && str.substr(0,4)=='http';
      },
      search(tablename) {
        if (this.queryIndex == 0 && this.tesemeishimeishimingcheng) {
          this.$router.push({path: '/index/' + tablename, query: {indexQueryCondition: this.tesemeishimeishimingcheng}});
        }
        if (this.queryIndex == 1 && this.lvyouxianluxianlumingcheng) {
          this.$router.push({path: '/index/' + tablename, query: {indexQueryCondition: this.lvyouxianluxianlumingcheng}});
        }
      },
		getNewsList() {
			let data = {
				page: 1,
				limit: 10,
                sort: 'addtime',
				order: 'desc'
			}
			this.$http.get('news/list', {params: data}).then(res => {
				if (res.data.code == 0) {
					this.newsList = res.data.data.list;
					
					
				}
			});
		},
		getList() {
			let autoSortUrl = "";
			let data = {}
          autoSortUrl = "lvyouxianlu/autoSort";
          if(localStorage.getItem('frontToken')) {
              autoSortUrl = "lvyouxianlu/autoSort2";
          }
			data = {
				page: 1,
				limit: 6,
			}
			this.$http.get(autoSortUrl, {params: data}).then(res => {
				if (res.data.code == 0) {
					this.lvyouxianluRecommend = res.data.data.list;
					
					
					// 商品列表样式五
					
				}
			});
			
			data = {
				page: 1,
				limit: 6,
			}
			this.$http.get('jingdianmenpiao/list', {params: data}).then(res => {
				if (res.data.code == 0) {
					this.jingdianmenpiaoList = res.data.data.list;
					
					// 商品列表样式五
					
				}
			});
			data = {
				page: 1,
				limit: 6,
			}
			data['sort'] = 'kefangjiage'
			data['order']= 'desc'
			this.$http.get('jiudiankefang/list', {params: data}).then(res => {
				if (res.data.code == 0) {
					this.jiudiankefangList = res.data.data.list;
					
					// 商品列表样式五
					
				}
			});
			data = {
				page: 1,
				limit: 6,
			}
			this.$http.get('tesemeishi/list', {params: data}).then(res => {
				if (res.data.code == 0) {
					this.tesemeishiList = res.data.data.list;
					
					// 商品列表样式五
					
				}
			});
		},
		toDetail(path, item) {
			this.$router.push({path: '/index/' + path, query: {id: item.id}});
		},
		moreBtn(path) {
			this.$router.push({path: '/index/' + path});
		}
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	.home-preview {
		// -------- search --------
		.search .select /deep/ .el-input__inner {
			border: 0;
			border-radius: 4px;
			padding: 0 30px 0 10px;
			box-shadow: 0 0 6px rgba(64, 158, 255, .3);
			outline: none;
			color: rgba(64, 158, 255, 1);
			width: 180px;
			font-size: 14px;
			height: 44px;
		}
		
		.search .input /deep/ .el-input__inner {
			border: 0;
			border-radius: 4px;
			padding: 0 10px;
			box-shadow: 0 0 6px rgba(64, 158, 255, .3);
			outline: none;
			color: rgba(64, 158, 255, 1);
			width: 180px;
			font-size: 14px;
			height: 44px;
		}
		// -------- search --------
		.recommend {
			.list3 .swiper-button-prev {
				left: 10px;
				right: auto;
			}
			
			.list3 .swiper-button-prev::after {
				color: rgb(64, 158, 255);
			}
			
			.list3 .swiper-button-next {
				left: auto;
				right: 10px;
			}
			
			.list3 .swiper-button-next::after {
				color: rgb(64, 158, 255);
			}
			
			.list5 .swiper-button-prev {
				left: 10px;
				right: auto;
			}
			
			.list5 .swiper-button-prev::after {
				color: rgb(64, 158, 255);
        }
        
        .list5 .swiper-button-next {
				left: auto;
				right: 10px;
			}
			
			.list5 .swiper-button-next::after {
				color: rgb(64, 158, 255);
			}
			
			.list5 {
				.swiper-slide-prev {
					position: relative;
					z-index: 3;
				}
		
				.swiper-slide-next {
					position: relative;
					z-index: 3;
				}
		
				.swiper-slide-active {
					position: relative;
					z-index: 5;
				}
			}
			
			.index-pv1 .animation-box {
				transform: rotate(0deg) scale(1) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
				z-index: initial;
			}
			
			.index-pv1 .animation-box:hover {
				transform: rotate(0deg) scale(1) skew(0deg, 0deg) translate3d(0px, 10px, 0px);
				-webkit-perspective: 1000px;
				perspective: 1000px;
				transition: 0.3s;
				z-index: 1;
			}
			
			.index-pv1 .animation-box img {
				transform: rotate(0deg) scale(1) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
			}
			
			.index-pv1 .animation-box img:hover {
				transform: rotate(0deg) scale(1) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
				-webkit-perspective: 1000px;
				perspective: 1000px;
				transition: 0.3s;
			}
		}
		
		.news {
			.list3 .swiper-button-prev {
				left: 10px;
				right: auto;
			}
			
			.list3 .swiper-button-prev::after {
				color: rgb(64, 158, 255);
			}
			
			.list3 .swiper-button-next {
				left: auto;
				right: 10px;
			}
			
			.list3 .swiper-button-next::after {
				color: rgb(64, 158, 255);
			}
			
			.list6 .swiper-button-prev {
				left: 10px;
				right: auto;
			}
			
			.list6 .swiper-button-prev::after {
				color: rgb(64, 158, 255);
			}
			
			.list6 .swiper-button-next {
				left: auto;
				right: 10px;
			}
			
			.list6 .swiper-button-next::after {
				color: rgb(64, 158, 255);
			}
			
			.index-pv1 .animation-box {
				transform: rotate(0deg) scale(1) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
				z-index: initial;
			}
			
			.index-pv1 .animation-box:hover {
				transform: rotate(0deg) scale(1) skew(0deg, 0deg) translate3d(0px, 10px, 0px);
				-webkit-perspective: 1000px;
				perspective: 1000px;
				transition: 0.3s;
				z-index: 1;
			}
			
			.index-pv1 .animation-box img {
				transform: rotate(0deg) scale(1) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
			}
			
			.index-pv1 .animation-box img:hover {
				transform: rotate(0deg) scale(1.1) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
				-webkit-perspective: 1000px;
				perspective: 1000px;
				transition: 0.3s;
			}
		}
	
		.lists {
			.list3 .swiper-button-prev {
				left: 10px;
				right: auto;
			}
			
			.list3 .swiper-button-prev::after {
				color: rgb(64, 158, 255);
			}
			
			.list3 .swiper-button-next {
				left: auto;
				right: 10px;
        }
        
        .list3 .swiper-button-next::after {
				color: rgb(64, 158, 255);
			}
			
			.list5 .swiper-button-prev {
				left: 10px;
				right: auto;
			}
			
			.list5 .swiper-button-prev::after {
				color: rgb(64, 158, 255);
			}
			
			.list5 .swiper-button-next {
            left: auto;
            right: 10px;
			}
			
			.list5 .swiper-button-next::after {
				color: rgb(64, 158, 255);
			}
			
			.list5 {
				.swiper-slide-prev {
					position: relative;
					z-index: 3;
				}
		
				.swiper-slide-next {
					position: relative;
					z-index: 3;
				}
		
				.swiper-slide-active {
					position: relative;
					z-index: 5;
				}
			}
			
			.index-pv1 .animation-box {
				transform: rotate(0deg) scale(1) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
				z-index: initial;
			}
			
			.index-pv1 .animation-box:hover {
				transform: rotate(0deg) scale(1) skew(0deg, 0deg) translate3d(0px, 10px, 0px);
				-webkit-perspective: 1000px;
				perspective: 1000px;
				transition: 0.3s;
				z-index: 1;
			}
			
			.index-pv1 .animation-box img {
				transform: rotate(0deg) scale(1) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
			}
			
			.index-pv1 .animation-box img:hover {
				transform: rotate(0deg) scale(1.1) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
				-webkit-perspective: 1000px;
				perspective: 1000px;
				transition: 0.3s;
			}
		}
	}
	





	.home-preview .news .list19 .left .item .title {
				padding: 5px 10px;
				overflow: hidden;
				color: #333;
				font-size: 14px;
				line-height: 30px;
				height: 30px;
			}
	
	.home-preview .news .list19 .left .item .title:hover {
				color: #000;
			}
	
	.home-preview .news .list19 .right .item .dian {
				border-radius: 100%;
				margin: 0 6px;
				background: #654b3c;
				width: 6px;
				height: 6px;
			}
	.home-preview .news .list19 .right .item:hover .dian {
				background: #654b3c;
			}
	
	.home-preview .news .list19 .right .item .title {
				overflow: hidden;
				color: #333;
				flex: 1;
				font-size: 14px;
				line-height: 45px;
				transition: 0.3s;
				height: 45px;
			}
	.home-preview .news .list19 .right .item:hover .title {
				color: #654b3c;
			}
	
	.home-preview .news .list19 .right .item .time .icon {
				color: #666;
				font-size: 12px;
				line-height: 32px;
			}
	.home-preview .news .list19 .right .item:hover .time .icon {
				color: #654b3c;
			}
	
	.home-preview .news .list19 .right .item .time .text {
				color: #666;
				font-size: 12px;
				line-height: 32px;
			}
	.home-preview .news .list19 .right .item:hover .time .text {
				color: #654b3c;
			}


	.home-preview .recommend .list12 .tab .item {
				cursor: pointer;
				border: 0;
				margin: 0 10px;
				background-size: 100% 100%;
				color: #654B3C;
				display: flex;
				font-size: 16px;
				flex-direction: column;
				background: url(http://codegen.caihongy.cn/20231114/7fb39082b8fa4b8b95898208654dbc13.png);
				width: 90px;
				justify-content: center;
				align-items: center;
				height: 90px;
			}
	
	.home-preview .recommend .list12 .tab .item:hover {
				color: #654B3C;
			}
	
	.home-preview .recommend .list12 .tab .item.active {
				color: #654B3C;
				border-color: #654B3C;
				border-width: 0 0 2px 0;
				border-style: solid;
			}
	
	.home-preview .recommend .list12 .tab .more {
				cursor: pointer;
				border: 1px solid #DFDFDF;
				padding: 0 20px;
				margin: 0 10px;
				color: #654B3C;
				display: flex;
				width: 90px;
				justify-content: center;
				align-items: center;
				text-align: center;
				height: 90px;
			}
	
	.home-preview .recommend .list12 .tab .more:hover {
				color: #654B3C;
			}
	
	.home-preview .recommend .list12 .item.active {
	  animation-name: mymove;
	
	  &:nth-of-type(1) {
	    animation-duration: 1s;
	  }
	  &:nth-of-type(2) {
	    animation-duration: 1.2s;
	  }
	  &:nth-of-type(3) {
	    animation-duration: 1.4s;
	  }
	  &:nth-of-type(4) {
	    animation-duration: 1.6s;
	  }
	  &:nth-of-type(5) {
	    animation-duration: 1.8s;
	  }
	  &:nth-of-type(6) {
	    animation-duration: 2s;
	  }
	}
	
	@keyframes mymove
	{
		from {top: 320px;}
		to {top: 0;}
	}



	.home-preview .lists .list15 .left .box1 .info {
				left: 0;
				background: rgba(0,0,0,.3);
				bottom: 0;
				display: flex;
				width: 100%;
				justify-content: center;
				align-items: center;
				position: absolute;
				opacity: 0;
				transition: all .3s;
				height: 100%;
			}
	
	.home-preview .lists .list15 .left .box1 .info:hover {
				opacity: 1;
			}
	
	.home-preview .lists .list15 .left .box2 .info {
				left: 0;
				background: rgba(0,0,0,.3);
				bottom: 0;
				display: flex;
				width: 100%;
				justify-content: center;
				align-items: center;
				position: absolute;
				opacity: 0;
				transition: all .3s;
				height: 100%;
			}
	
	.home-preview .lists .list15 .left .box2 .info:hover {
				opacity: 1;
			}
	
	.home-preview .lists .list15 .center .box1 .info {
				left: 0;
				background: rgba(0,0,0,.3);
				bottom: 0;
				display: flex;
				width: 100%;
				justify-content: center;
				align-items: center;
				position: absolute;
				opacity: 0;
				transition: all .3s;
				height: 100%;
			}
	
	.home-preview .lists .list15 .center .box1 .info:hover {
				opacity: 1;
			}
	
	.home-preview .lists .list15 .center .box3 .info {
				left: 0;
				background: rgba(0,0,0,.3);
				bottom: 0;
				display: flex;
				width: 100%;
				justify-content: center;
				align-items: center;
				position: absolute;
				opacity: 0;
				transition: all .3s;
				height: 100%;
			}
	
	.home-preview .lists .list15 .center .box3 .info:hover {
				opacity: 1;
			}
	
	.home-preview .lists .list15 .right .box1 .info {
				left: 0;
				background: rgba(0,0,0,.3);
				bottom: 0;
				display: flex;
				width: 100%;
				justify-content: center;
				align-items: center;
				position: absolute;
				opacity: 0;
				transition: all .3s;
				height: 100%;
			}
	
	.home-preview .lists .list15 .right .box1 .info:hover {
				opacity: 1;
			}
	
	.home-preview .lists .list15 .right .box2 .info {
				left: 0;
				background: rgba(0,0,0,.3);
				bottom: 0;
				display: flex;
				width: 100%;
				justify-content: center;
				align-items: center;
				position: absolute;
				opacity: 0;
				transition: all .3s;
				height: 100%;
			}
	
	.home-preview .lists .list15 .right .box2 .info:hover {
				opacity: 1;
			}
</style>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

biyezuopinvip
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值