Skip to content

V
vue-ssr
Commit 57f155a0 authored by guoyou's avatar guoyou
Browse files
Options

首页改版

parent b3ee4342
Hide whitespace changes
Inline Side-by-side
Showing with 3290 additions and 712 deletions
.nuxt/App.js
View file @ 57f155a0
import Vue from 'vue' import Vue from 'vue'
import NuxtLoading from '~/components/loading.vue' import NuxtLoading from '~/components/loading.vue'
import '..\\assets\\index.css'
import '..\\assets\\menu.css'
import '..\\assets\\main.css'
import '..\\assets\\font\\iconfont.css'
let layouts = { let layouts = {
...@@ -11,7 +19,7 @@ let layouts = { ...@@ -11,7 +19,7 @@ let layouts = {
let resolvedLayouts = {} let resolvedLayouts = {}
export default { export default {
head: {"title":"欣新房车—房车·让生活更美好-房车销售丨房车租赁丨房车旅游丨房车托管","meta":[{"charset":"utf-8"},{"name":"viewport","content":"width=device-width, initial-scale=1"},{"hid":"keywords","name":"keywords","content":"欣新房车，房车旅游，房车，房车租赁，房车销售，房车价格，房车之家，房车经济，房车高峰论坛"},{"hid":"description","name":"description","content":"欣新房车是一家专业从事房车销售，房车租赁，房车旅游，房车托管及房车产业配套与服务的免费异地取车异地还车已在全国各地举办多届房车经济峰会的集团股份公司"}],"link":[{"rel":"icon","type":"image\u002Fx-icon","href":"https:\u002F\u002Fmgmt.dfangche.com\u002Fxxfccn\u002Fimage\u002F1\u002Fapp\u002F5d9c62b7412efd926f70e0ed5efb19a.png"},{"rel":"stylesheet","href":"https:\u002F\u002Ffonts.googleapis.com\u002Fcss?family=Roboto:300,400,500,700,400italic"},{"rel":"stylesheet","href":"https:\u002F\u002Fmgmt.dfangche.com\u002Fxxfccn\u002Fcss\u002Fpc\u002Fmain.css"},{"rel":"stylesheet","href":"https:\u002F\u002Fmgmt.dfangche.com\u002Fxxfccn\u002Fcss\u002Fpc\u002Fmenu.css"},{"rel":"stylesheet","href":"https:\u002F\u002Fmgmt.dfangche.com\u002Fxxfccn\u002Fcss\u002Fpc\u002Ffooter.css"},{"rel":"stylesheet","href":"https:\u002F\u002Fmgmt.dfangche.com\u002Fxxfccn\u002Fcss\u002Fpc\u002Findex.css"},{"rel":"stylesheet","href":"https:\u002F\u002Fmgmt.dfangche.com\u002Fxxfccn\u002Fcss\u002Fpc\u002FgoTop.css"},{"rel":"stylesheet","href":"https:\u002F\u002Fmgmt.dfangche.com\u002Fxxfccn\u002Fcss\u002Fpc\u002Fswiper.min.css"},{"rel":"stylesheet","href":"https:\u002F\u002Fwww.xxfangche.com\u002Fxxfccn\u002Fcss\u002Fpc\u002Fel\u002Findex.css"}],"script":[{"src":"https:\u002F\u002Fdev.dfangche.com\u002Fh5\u002FappHtml\u002Fjs\u002Futil.js"}],"style":[]}, head: {"title":"欣新房车—房车·让生活更美好-房车销售丨房车租赁丨房车旅游丨房车托管","meta":[{"charset":"utf-8"},{"name":"viewport","content":"width=device-width, initial-scale=1"},{"hid":"keywords","name":"keywords","content":"欣新房车，房车旅游，房车，房车租赁，房车销售，房车价格，房车之家，房车经济，房车高峰论坛"},{"hid":"description","name":"description","content":"欣新房车是一家专业从事房车销售，房车租赁，房车旅游，房车托管及房车产业配套与服务的免费异地取车异地还车已在全国各地举办多届房车经济峰会的集团股份公司"}],"link":[{"rel":"icon","type":"image\u002Fx-icon","href":"https:\u002F\u002Fmgmt.dfangche.com\u002Fxxfccn\u002Fimage\u002F1\u002Fapp\u002F5d9c62b7412efd926f70e0ed5efb19a.png"},{"rel":"stylesheet","href":"https:\u002F\u002Ffonts.googleapis.com\u002Fcss?family=Roboto:300,400,500,700,400italic"},{"rel":"stylesheet","href":"https:\u002F\u002Fmgmt.dfangche.com\u002Fxxfccn\u002Fcss\u002Fpc\u002Ffooter.css"},{"rel":"stylesheet","href":"https:\u002F\u002Fmgmt.dfangche.com\u002Fxxfccn\u002Fcss\u002Fpc\u002FgoTop.css"},{"rel":"stylesheet","href":"https:\u002F\u002Fmgmt.dfangche.com\u002Fxxfccn\u002Fcss\u002Fpc\u002Fswiper.min.css"},{"rel":"stylesheet","href":"https:\u002F\u002Fwww.xxfangche.com\u002Fxxfccn\u002Fcss\u002Fpc\u002Fel\u002Findex.css"}],"script":[{"src":"https:\u002F\u002Fdev.dfangche.com\u002Fh5\u002FappHtml\u002Fjs\u002Futil.js"}],"style":[]},
render(h, props) { render(h, props) {
const loadingEl = h('nuxt-loading', { ref: 'loading' }) const loadingEl = h('nuxt-loading', { ref: 'loading' })
const layoutEl = h(this.layout || 'nuxt') const layoutEl = h(this.layout || 'nuxt')
......
assets/font/demo.css 0 → 100644
View file @ 57f155a0
/* Logo 字体 */
@font-face {
font-family: "iconfont logo";
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
}
.logo {
font-family: "iconfont logo";
font-size: 160px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* tabs */
.nav-tabs {
position: relative;
}
.nav-tabs .nav-more {
position: absolute;
right: 0;
bottom: 0;
height: 42px;
line-height: 42px;
color: #666;
}
#tabs {
border-bottom: 1px solid #eee;
}
#tabs li {
cursor: pointer;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 16px;
border-bottom: 2px solid transparent;
position: relative;
z-index: 1;
margin-bottom: -1px;
color: #666;
}
#tabs .active {
border-bottom-color: #f00;
color: #222;
}
.tab-container .content {
display: none;
}
/* 页面布局 */
.main {
padding: 30px 100px;
width: 960px;
margin: 0 auto;
}
.main .logo {
color: #333;
text-align: left;
margin-bottom: 30px;
line-height: 1;
height: 110px;
margin-top: -50px;
overflow: hidden;
*zoom: 1;
}
.main .logo a {
font-size: 160px;
color: #333;
}
.helps {
margin-top: 40px;
}
.helps pre {
padding: 20px;
margin: 10px 0;
border: solid 1px #e7e1cd;
background-color: #fffdef;
overflow: auto;
}
.icon_lists {
width: 100% !important;
overflow: hidden;
*zoom: 1;
}
.icon_lists li {
width: 100px;
margin-bottom: 10px;
margin-right: 20px;
text-align: center;
list-style: none !important;
cursor: default;
}
.icon_lists li .code-name {
line-height: 1.2;
}
.icon_lists .icon {
display: block;
height: 100px;
line-height: 100px;
font-size: 42px;
margin: 10px auto;
color: #333;
-webkit-transition: font-size 0.25s linear, width 0.25s linear;
-moz-transition: font-size 0.25s linear, width 0.25s linear;
transition: font-size 0.25s linear, width 0.25s linear;
}
.icon_lists .icon:hover {
font-size: 100px;
}
.icon_lists .svg-icon {
/* 通过设置 font-size 来改变图标大小 */
width: 1em;
/* 图标和文字相邻时，垂直对齐 */
vertical-align: -0.15em;
/* 通过设置 color 来改变 SVG 的颜色/fill */
fill: currentColor;
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
normalize.css 中也包含这行 */
overflow: hidden;
}
.icon_lists li .name,
.icon_lists li .code-name {
color: #666;
}
/* markdown 样式 */
.markdown {
color: #666;
font-size: 14px;
line-height: 1.8;
}
.highlight {
line-height: 1.5;
}
.markdown img {
vertical-align: middle;
max-width: 100%;
}
.markdown h1 {
color: #404040;
font-weight: 500;
line-height: 40px;
margin-bottom: 24px;
}
.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
color: #404040;
margin: 1.6em 0 0.6em 0;
font-weight: 500;
clear: both;
}
.markdown h1 {
font-size: 28px;
}
.markdown h2 {
font-size: 22px;
}
.markdown h3 {
font-size: 16px;
}
.markdown h4 {
font-size: 14px;
}
.markdown h5 {
font-size: 12px;
}
.markdown h6 {
font-size: 12px;
}
.markdown hr {
height: 1px;
border: 0;
background: #e9e9e9;
margin: 16px 0;
clear: both;
}
.markdown p {
margin: 1em 0;
}
.markdown>p,
.markdown>blockquote,
.markdown>.highlight,
.markdown>ol,
.markdown>ul {
width: 80%;
}
.markdown ul>li {
list-style: circle;
}
.markdown>ul li,
.markdown blockquote ul>li {
margin-left: 20px;
padding-left: 4px;
}
.markdown>ul li p,
.markdown>ol li p {
margin: 0.6em 0;
}
.markdown ol>li {
list-style: decimal;
}
.markdown>ol li,
.markdown blockquote ol>li {
margin-left: 20px;
padding-left: 4px;
}
.markdown code {
margin: 0 3px;
padding: 0 5px;
background: #eee;
border-radius: 3px;
}
.markdown strong,
.markdown b {
font-weight: 600;
}
.markdown>table {
border-collapse: collapse;
border-spacing: 0px;
empty-cells: show;
border: 1px solid #e9e9e9;
width: 95%;
margin-bottom: 24px;
}
.markdown>table th {
white-space: nowrap;
color: #333;
font-weight: 600;
}
.markdown>table th,
.markdown>table td {
border: 1px solid #e9e9e9;
padding: 8px 16px;
text-align: left;
}
.markdown>table th {
background: #F7F7F7;
}
.markdown blockquote {
font-size: 90%;
color: #999;
border-left: 4px solid #e9e9e9;
padding-left: 0.8em;
margin: 1em 0;
}
.markdown blockquote p {
margin: 0;
}
.markdown .anchor {
opacity: 0;
transition: opacity 0.3s ease;
margin-left: 8px;
}
.markdown .waiting {
color: #ccc;
}
.markdown h1:hover .anchor,
.markdown h2:hover .anchor,
.markdown h3:hover .anchor,
.markdown h4:hover .anchor,
.markdown h5:hover .anchor,
.markdown h6:hover .anchor {
opacity: 1;
display: inline-block;
}
.markdown>br,
.markdown>p>br {
clear: both;
}
.hljs {
display: block;
background: white;
padding: 0.5em;
color: #333333;
overflow-x: auto;
}
.hljs-comment,
.hljs-meta {
color: #969896;
}
.hljs-string,
.hljs-variable,
.hljs-template-variable,
.hljs-strong,
.hljs-emphasis,
.hljs-quote {
color: #df5000;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-type {
color: #a71d5d;
}
.hljs-literal,
.hljs-symbol,
.hljs-bullet,
.hljs-attribute {
color: #0086b3;
}
.hljs-section,
.hljs-name {
color: #63a35c;
}
.hljs-tag {
color: #333333;
}
.hljs-title,
.hljs-attr,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo {
color: #795da3;
}
.hljs-addition {
color: #55a532;
background-color: #eaffea;
}
.hljs-deletion {
color: #bd2c00;
background-color: #ffecec;
}
.hljs-link {
text-decoration: underline;
}
/* 代码高亮 */
/* PrismJS 1.15.0
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
/**
* prism.js default theme for JavaScript, CSS and HTML
* Based on dabblet (http://dabblet.com)
* @author Lea Verou
*/
code[class*="language-"],
pre[class*="language-"] {
color: black;
background: none;
text-shadow: 0 1px white;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre[class*="language-"]::-moz-selection,
pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection,
code[class*="language-"] ::-moz-selection {
text-shadow: none;
background: #b3d4fc;
}
pre[class*="language-"]::selection,
pre[class*="language-"] ::selection,
code[class*="language-"]::selection,
code[class*="language-"] ::selection {
text-shadow: none;
background: #b3d4fc;
}
@media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
}
:not(pre)>code[class*="language-"],
pre[class*="language-"] {
background: #f5f2f0;
}
/* Inline code */
:not(pre)>code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
}
.token.punctuation {
color: #999;
}
.namespace {
opacity: .7;
}
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
color: #905;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #690;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #9a6e3a;
background: hsla(0, 0%, 100%, .5);
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #07a;
}
.token.function,
.token.class-name {
color: #DD4A68;
}
.token.regex,
.token.important,
.token.variable {
color: #e90;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
assets/font/demo_index.html 0 → 100644
View file @ 57f155a0
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>IconFont Demo</title>
<link rel="shortcut icon" href="https://gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
<link rel="stylesheet" href="demo.css">
<link rel="stylesheet" href="iconfont.css">
<script src="iconfont.js"></script>
<!-- jQuery -->
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
<!-- 代码高亮 -->
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
</head>
<body>
<div class="main">
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
<div class="nav-tabs">
<ul id="tabs" class="dib-box">
<li class="dib active"><span>Unicode</span></li>
<li class="dib"><span>Font class</span></li>
<li class="dib"><span>Symbol</span></li>
</ul>
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1457191" target="_blank" class="nav-more">查看项目</a>
</div>
<div class="tab-container">
<div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe6bc;</span>
<div class="name">24小时</div>
<div class="code-name">&amp;#xe6bc;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe60b;</span>
<div class="name">地图</div>
<div class="code-name">&amp;#xe60b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe617;</span>
<div class="name">电话</div>
<div class="code-name">&amp;#xe617;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe623;</span>
<div class="name">单箭头</div>
<div class="code-name">&amp;#xe623;</div>
</li>
</ul>
<div class="article markdown">
<h2 id="unicode-">Unicode 引用</h2>
<hr>
<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
<ul>
<li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
<li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
<li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
</ul>
<blockquote>
<p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
</blockquote>
<p>Unicode 使用步骤如下：</p>
<h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.eot');
src: url('iconfont.eot?#iefix') format('embedded-opentype'),
url('iconfont.woff2') format('woff2'),
url('iconfont.woff') format('woff'),
url('iconfont.ttf') format('truetype'),
url('iconfont.svg#iconfont') format('svg');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</code></pre>
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
<blockquote>
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
</blockquote>
</div>
</div>
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon24xiaoshi"></span>
<div class="name">
24小时
</div>
<div class="code-name">.icon24xiaoshi
</div>
</li>
<li class="dib">
<span class="icon iconfont iconditu"></span>
<div class="name">
地图
</div>
<div class="code-name">.iconditu
</div>
</li>
<li class="dib">
<span class="icon iconfont iconyidongduanicon-"></span>
<div class="name">
电话
</div>
<div class="code-name">.iconyidongduanicon-
</div>
</li>
<li class="dib">
<span class="icon iconfont iconsingle_arrow"></span>
<div class="name">
单箭头
</div>
<div class="code-name">.iconsingle_arrow
</div>
</li>
</ul>
<div class="article markdown">
<h2 id="font-class-">font-class 引用</h2>
<hr>
<p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
<p>与 Unicode 使用方式相比，具有如下特点：</p>
<ul>
<li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
<li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
<li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
<li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
</ul>
<p>使用步骤如下：</p>
<h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont iconxxx"&gt;&lt;/span&gt;
</code></pre>
<blockquote>
<p>"
iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
</blockquote>
</div>
</div>
<div class="content symbol">
<ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon24xiaoshi"></use>
</svg>
<div class="name">24小时</div>
<div class="code-name">#icon24xiaoshi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconditu"></use>
</svg>
<div class="name">地图</div>
<div class="code-name">#iconditu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconyidongduanicon-"></use>
</svg>
<div class="name">电话</div>
<div class="code-name">#iconyidongduanicon-</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconsingle_arrow"></use>
</svg>
<div class="name">单箭头</div>
<div class="code-name">#iconsingle_arrow</div>
</li>
</ul>
<div class="article markdown">
<h2 id="symbol-">Symbol 引用</h2>
<hr>
<p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
<ul>
<li>支持多色图标了，不再受单色限制。</li>
<li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
<li>兼容性较差，支持 IE9+，及现代浏览器。</li>
<li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
</ul>
<p>使用步骤如下：</p>
<h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
&lt;/style&gt;
</code></pre>
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
&lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('.tab-container .content:first').show()
$('#tabs li').click(function (e) {
var tabContent = $('.tab-container .content')
var index = $(this).index()
if ($(this).hasClass('active')) {
return
} else {
$('#tabs li').removeClass('active')
$(this).addClass('active')
tabContent.hide().eq(index).fadeIn()
}
})
})
</script>
</body>
</html>
assets/font/iconfont.css 0 → 100644
View file @ 57f155a0
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1571128885134'); /* IE9 */
src: url('iconfont.eot?t=1571128885134#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAASoAAsAAAAACPwAAARaAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDMgqFCIQ4ATYCJAMUCwwABCAFhG0HWxvXB8iOkVuMOJb/5188fO33eu7uvhci9DweSKhERUVVWCBfIWtEWdemwrAR/+/Z1EeY5EJdfsUtFZvBRGmAlEboESaeztVhJvY/l9OrLTi/neW49uI66gUYB5SFe+JaeqAFEiDm3jB2cRnbCbSaFA071Va1A7VC6xeIB15PgzqmU0qKQ7NQ50wt4h0015yeq84BeOt+Pv5DYqhJqkwbenZfwkD+L+LZPtz63wpdbAT4/VnAzCJjHSjEY67tAe7H1uFapdbNHAKtmiWpr2buz4Ke7fv/n1C0IkWr/odHkhVB1DRZO6Icxgu/CBMl8csdJfMriFcu3wcF5yKr7Cmt6MJ3gOgFTTHvDmmWZdHS1TJF4IMAD+3tPQQxbFhDUe3ItUe9OiqKO7XuJinLUdQ0hSLJ9pTituJceKexGPbhYtp1mZSvtcKmzQ7Drl6nFKXdtmvhrrEwjRHRqq98BYSbW6B++C3RjkHEwrSxMDt7VzQUnPd9FtZ72z7r/rEHmw5Q1661k2+Wn73dXlE6nFACl14vPS4HLLqm26PkrtkSRe0ae7uHcdQqhcaoGWNcWpFtZ84RsZlNbjijP+Y2w43jXotNs7qSdmNWWVcTjjPXuvfknWorO5GtMh49blvxMz+0c5fw8qKHj66E2D24+0l+YmP7dHNYcXhZ2ZqOynVtq5JfUNNq3p49+MyFGHjxvJPRcxuHGpwqI8f2ANXbdnAjYbEbFdz/Sp+BfvvKYi5A85cl2t8xnk6eI73oEU51MdpcbZ1uucYSEv849ZvnMhQaHPXxIOkw1kE4ex4grTvcLb5bcr74fODn0artO/DRdv3+jmWYv+Ps+qpG79gx+qS1ssrDw6RbJ9HVanzAn6/VtTVdNh5of/tWjZuz8urTi2Df3bJMFqD+DKxcMdt79V5FOTtHE/kLZvvMXrt2ls+sfbdvQ3bkq7xDkr289qK9AO5/5epFRy6Qc0z8UGwPzwAad/NZHAE0DuJleABAYz++F88EIH9SNf0q37H9lM13t8/+qiYK+Hl2ZYrra+xvBvXjzRIM/8fg16woslDTV0UsN3lifuWOmlst+AdKfgdXr3v9qAZwIjQbCCFpMmHJmmU+JBTKOlTa7EOt2QG0WlM6u00fES5KC1YNBxC6bYSk00fIup0nFMpdqAx6C7XuwKHVTTgv2WYxeE2RyNISy6C6vojXCWbOMEoar7gNq+9ppMWo0GVQrGjhgyghNj6ZLGXNrNjHCEsvfaIkcYgTBRPSgt1Yo1FAjaLQwOqk2HpJasyMi+PyrhSrE0ygcULEoklYDKROXwhPR2DG2bUlmtT722Dp9WREE0swJW4KS2TBN44kiBVfg1AqM9fCnMs+Fr3oJZJIOAhHJDBBtMDCMuoxAdKY36kBS0cSq75FpFGmOFSNqyuLHV9husZ10Eq7UBUpcpSootaym9yHpwVLPd+M4aWe9n15RjDrmZ60+UjGxthYeLPeyHanRVHoDQAAAA==') format('woff2'),
url('iconfont.woff?t=1571128885134') format('woff'),
url('iconfont.ttf?t=1571128885134') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1571128885134#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon24xiaoshi:before {
content: "\e6bc";
}
.iconditu:before {
content: "\e60b";
}
.iconyidongduanicon-:before {
content: "\e617";
}
.iconsingle_arrow:before {
content: "\e623";
}
assets/font/iconfont.js 0 → 100644
View file @ 57f155a0
!function(a){var e,n='<svg><symbol id="icon24xiaoshi" viewBox="0 0 1024 1024"><path d="M374.321436 278.414786c-9.638048-12.114457-188.927143-181.777667-188.927143-181.777667l-81.721498 58.185882 227.340674 228.393999C357.117934 358.261949 398.201268 310.954752 374.321436 278.414786L374.321436 278.414786zM438.73118 573.415187C311.823732 445.949452 309.499362 409.574457 311.278824 401.898319L85.087564 174.646436c-22.627032 45.77951-84.525095 234.233508 232.705821 528.54791C645.028459 1006.818392 780.987694 921.531887 806.63361 899.504496L590.497592 682.366238C576.489339 684.824402 538.402995 673.524874 438.73118 573.415187L438.73118 573.415187zM610.030329 663.470848l214.883218 215.845319 70.623877-81.356605c0 0-183.266431-185.61756-180.395938-186.621017C679.204363 593.278761 631.768238 639.093544 610.030329 663.470848L610.030329 663.470848zM458.169045 247.476701c0.345432-0.133794 0.571666-0.323539 0.757762-0.588694l0.172716 0.167851c32.567941-36.36648 75.62778-64.067961 126.222666-77.882821 139.797912-38.172702 284.071848 44.175196 322.250631 183.995002 27.107921 99.275297-6.58754 200.804419-78.444756 264.979415l0.188528 0.290698c0 0-1.505793 40.539643 29.448104 29.411614l0.22745 0.279752c82.239647-74.61581 120.596011-191.640732 89.3502-306.071263C904.026057 179.759807 736.537611 84.118847 574.21727 128.442433c-58.43036 15.95435-108.243158 47.875214-145.967041 89.797803l0.485308 0.443953c-0.057167 4.865244 0.675053 39.106829 29.435941 28.797377L458.169045 247.476701zM784.733931 499.115618l0-44.832004 25.243317 0 0-17.794629L784.733931 436.488985 784.733931 301.033304l-26.167713 0L661.387841 436.488985l0 17.794629 97.178377 0 0 44.832004L784.733931 499.115618 784.733931 499.115618zM687.560419 436.465876l71.005799-99.01379 0 99.01379L687.560419 436.465876 687.560419 436.465876zM593.190504 425.266085c37.390614-24.294594 55.146321-48.895699 53.268337-73.826424-3.117405-32.997299-25.549827-50.751789-67.293618-53.248876-36.1293 0-59.476388 18.412515-70.058293 55.145104l25.243317 0c6.851479-24.890587 22.088206-37.658202 45.785592-38.299198 25.509689 0 38.316227 12.130269 38.316227 36.419998 1.854874 18.090192-13.40253 38.671389-45.80262 61.707102-29.285118 21.178406-51.08141 44.5036-65.414418 70.035183l0 15.899616 139.223813 0 0-15.899616-111.20001 0c8.701488-18.641181 28.023804-37.947684 57.928024-57.932889L593.190504 425.266085zM593.190504 425.266085" ></path></symbol><symbol id="iconditu" viewBox="0 0 1024 1024"><path d="M515.2 339c-44.8 0-81 36.3-81 81 0 44.8 36.3 81 81 81s81-36.3 81-81-36.3-81-81-81z m0-243.1c-179 0-324.1 145.1-324.1 324.1 0 135.5 270.2 540.5 324.1 540.2 53 0.3 324.1-406.5 324.1-540.2 0-179-145.1-324.1-324.1-324.1z m0 459.2c-74.6 0-135.1-60.5-135.1-135.1s60.5-135.1 135.1-135.1S650.3 345.4 650.3 420c-0.1 74.6-60.5 135.1-135.1 135.1z" ></path></symbol><symbol id="iconyidongduanicon-" viewBox="0 0 1024 1024"><path d="M508.84 650c-49-39.91-105.49-93.6-154.44-154.16-34.34-42.45-64.71-87-33.35-118.37L100.94 158C68.86 198-2.23 388.39 302.47 700.13c321 328.52 528.09 258.24 563.73 221.2L651.61 707c-30 29.93-68.64 3.32-142.77-57z m434.82 146.78v-0.2s-167.45-166.92-167.55-167a33.75 33.75 0 0 0-47.62 0.07l-60.69 60.74L883 905.29s60.76-60.53 60.7-60.6l0.16-0.13c13.9-13.91 12.48-35.07-0.16-47.78zM398.41 300.31v-0.17a33.57 33.57 0 0 0 0-47.69v-0.23L226.05 80.46a33.67 33.67 0 0 0-47.65 0l-60.69 60.79 219.93 219.61s60.77-60.45 60.77-60.55z" ></path></symbol><symbol id="iconsingle_arrow" viewBox="0 0 1024 1024"><path d="M960 576v-2q-0.06-1-0.15-2v-0.27c-0.06-0.56-0.13-1.13-0.21-1.7l-0.06-0.35c-0.09-0.54-0.18-1.07-0.29-1.61 0-0.11-0.05-0.22-0.07-0.34-0.12-0.53-0.24-1.07-0.37-1.6 0-0.09 0-0.18-0.08-0.28-0.14-0.55-0.3-1.09-0.46-1.64l-0.06-0.17c-0.18-0.58-0.37-1.15-0.58-1.72a39.6 39.6 0 0 0-6.69-11.65v-0.06c-0.39-0.47-0.78-0.93-1.19-1.38-0.22-0.24-0.45-0.47-0.67-0.7s-0.42-0.45-0.64-0.67L668.14 267.57a39.88 39.88 0 0 0-56.39 0l-0.18 0.18a39.88 39.88 0 0 0 0 56.39L823.43 536H104a40 40 0 0 0 0 80h817.87A40 40 0 0 0 960 577.89v-1.12-0.77z" fill="#999999" ></path></symbol></svg>',t=(e=document.getElementsByTagName("script"))[e.length-1].getAttribute("data-injectcss");if(t&&!a.__iconfont__svg__cssinject__){a.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(e){console&&console.log(e)}}!function(e){if(document.addEventListener)if(~["complete","loaded","interactive"].indexOf(document.readyState))setTimeout(e,0);else{var t=function(){document.removeEventListener("DOMContentLoaded",t,!1),e()};document.addEventListener("DOMContentLoaded",t,!1)}else document.attachEvent&&(o=e,c=a.document,i=!1,(l=function(){try{c.documentElement.doScroll("left")}catch(e){return void setTimeout(l,50)}n()})(),c.onreadystatechange=function(){"complete"==c.readyState&&(c.onreadystatechange=null,n())});function n(){i||(i=!0,o())}var o,c,i,l}(function(){var e,t;(e=document.createElement("div")).innerHTML=n,n=null,(t=e.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",function(e,t){t.firstChild?function(e,t){t.parentNode.insertBefore(e,t)}(e,t.firstChild):t.appendChild(e)}(t,document.body))})}(window);
\ No newline at end of file
assets/font/iconfont.json 0 → 100644
View file @ 57f155a0
{
"id": "1457191",
"name": "欣新房车官网",
"font_family": "iconfont",
"css_prefix_text": "icon",
"description": "",
"glyphs": [
{
"icon_id": "782211",
"name": "24小时",
"font_class": "24xiaoshi",
"unicode": "e6bc",
"unicode_decimal": 59068
},
{
"icon_id": "1724840",
"name": "地图",
"font_class": "ditu",
"unicode": "e60b",
"unicode_decimal": 58891
},
{
"icon_id": "3922113",
"name": "电话",
"font_class": "yidongduanicon-",
"unicode": "e617",
"unicode_decimal": 58903
},
{
"icon_id": "4395676",
"name": "单箭头",
"font_class": "single_arrow",
"unicode": "e623",
"unicode_decimal": 58915
}
]
}
assets/font/iconfont.svg 0 → 100644
View file @ 57f155a0
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<!--
2013-9-30: Created.
-->
<svg>
<metadata>
Created by iconfont
</metadata>
<defs>
<font id="iconfont" horiz-adv-x="1024" >
<font-face
font-family="iconfont"
font-weight="500"
font-stretch="normal"
units-per-em="1024"
ascent="896"
descent="-128"
/>
<missing-glyph />
<glyph glyph-name="24xiaoshi" unicode="&#59068;" d="M374.321436 617.585214c-9.638048 12.114457-188.927143 181.777667-188.927143 181.777667l-81.721498-58.185882 227.340674-228.393999C357.117934 537.738051 398.201268 585.045248 374.321436 617.585214L374.321436 617.585214zM438.73118 322.584813C311.823732 450.050548 309.499362 486.425543 311.278824 494.101681L85.087564 721.353564c-22.627032-45.77951-84.525095-234.233508 232.705821-528.54791C645.028459-110.818392 780.987694-25.531887 806.63361-3.504496L590.497592 213.633762C576.489339 211.175598 538.402995 222.475126 438.73118 322.584813L438.73118 322.584813zM610.030329 232.529152l214.883218-215.845319 70.623877 81.356605c0 0-183.266431 185.61756-180.395938 186.621017C679.204363 302.721239 631.768238 256.906456 610.030329 232.529152L610.030329 232.529152zM458.169045 648.523299c0.345432 0.133794 0.571666 0.323539 0.757762 0.588694l0.172716-0.167851c32.567941 36.36648 75.62778 64.067961 126.222666 77.882821 139.797912 38.172702 284.071848-44.175196 322.250631-183.995002 27.107921-99.275297-6.58754-200.804419-78.444756-264.979415l0.188528-0.290698c0 0-1.505793-40.539643 29.448104-29.411614l0.22745-0.279752c82.239647 74.61581 120.596011 191.640732 89.3502 306.071263C904.026057 716.240193 736.537611 811.881153 574.21727 767.557567c-58.43036-15.95435-108.243158-47.875214-145.967041-89.797803l0.485308-0.443953c-0.057167-4.865244 0.675053-39.106829 29.435941-28.797377L458.169045 648.523299zM784.733931 396.884382l0 44.832004 25.243317 0 0 17.794629L784.733931 459.511015 784.733931 594.966696l-26.167713 0L661.387841 459.511015l0-17.794629 97.178377 0 0-44.832004L784.733931 396.884382 784.733931 396.884382zM687.560419 459.534124l71.005799 99.01379 0-99.01379L687.560419 459.534124 687.560419 459.534124zM593.190504 470.733915c37.390614 24.294594 55.146321 48.895699 53.268337 73.826424-3.117405 32.997299-25.549827 50.751789-67.293618 53.248876-36.1293 0-59.476388-18.412515-70.058293-55.145104l25.243317 0c6.851479 24.890587 22.088206 37.658202 45.785592 38.299198 25.509689 0 38.316227-12.130269 38.316227-36.419998 1.854874-18.090192-13.40253-38.671389-45.80262-61.707102-29.285118-21.178406-51.08141-44.5036-65.414418-70.035183l0-15.899616 139.223813 0 0 15.899616-111.20001 0c8.701488 18.641181 28.023804 37.947684 57.928024 57.932889L593.190504 470.733915zM593.190504 470.733915" horiz-adv-x="1024" />
<glyph glyph-name="ditu" unicode="&#58891;" d="M515.2 557c-44.8 0-81-36.3-81-81 0-44.8 36.3-81 81-81s81 36.3 81 81-36.3 81-81 81z m0 243.1c-179 0-324.1-145.1-324.1-324.1 0-135.5 270.2-540.5 324.1-540.2 53-0.3 324.1 406.5 324.1 540.2 0 179-145.1 324.1-324.1 324.1z m0-459.2c-74.6 0-135.1 60.5-135.1 135.1s60.5 135.1 135.1 135.1S650.3 550.6 650.3 476c-0.1-74.6-60.5-135.1-135.1-135.1z" horiz-adv-x="1024" />
<glyph glyph-name="yidongduanicon-" unicode="&#58903;" d="M508.84 246c-49 39.91-105.49 93.6-154.44 154.16-34.34 42.45-64.71 87-33.35 118.37L100.94 738C68.86 698-2.23 507.61 302.47 195.87c321-328.52 528.09-258.24 563.73-221.2L651.61 189c-30-29.93-68.64-3.32-142.77 57z m434.82-146.78v0.2s-167.45 166.92-167.55 167a33.75 33.75 0 0 1-47.62-0.07l-60.69-60.74L883-9.29s60.76 60.53 60.7 60.6l0.16 0.13c13.9 13.91 12.48 35.07-0.16 47.78zM398.41 595.69v0.17a33.57 33.57 0 0 1 0 47.69v0.23L226.05 815.54a33.67 33.67 0 0 1-47.65 0l-60.69-60.79 219.93-219.61s60.77 60.45 60.77 60.55z" horiz-adv-x="1024" />
<glyph glyph-name="single_arrow" unicode="&#58915;" d="M960 320v2q-0.06 1-0.15 2v0.27c-0.06 0.56-0.13 1.13-0.21 1.7l-0.06 0.35c-0.09 0.54-0.18 1.07-0.29 1.61 0 0.11-0.05 0.22-0.07 0.34-0.12 0.53-0.24 1.07-0.37 1.6 0 0.09 0 0.18-0.08 0.28-0.14 0.55-0.3 1.09-0.46 1.64l-0.06 0.17c-0.18 0.58-0.37 1.15-0.58 1.72a39.6 39.6 0 0 1-6.69 11.65v0.06c-0.39 0.47-0.78 0.93-1.19 1.38-0.22 0.24-0.45 0.47-0.67 0.7s-0.42 0.45-0.64 0.67L668.14 628.4300000000001a39.88 39.88 0 0 1-56.39 0l-0.18-0.18a39.88 39.88 0 0 1 0-56.39L823.43 360H104a40 40 0 0 1 0-80h817.87A40 40 0 0 1 960 318.11v1.12 0.77z" horiz-adv-x="1024" />
</font>
</defs></svg>
assets/index.css
View file @ 57f155a0
.banner-vehicle{ li {
list-style: none;
}
.banner-vehicle {
height: 600px; height: 600px;
} }
.video-container{
.video-container {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;
background:url(https://mgmt.dfangche.com/xxfccn/image/home/background03.jpg) no-repeat; background: url(https://mgmt.dfangche.com/xxfccn/image/home/background03.jpg) no-repeat;
} }
@media screen and (max-width:1120px){ @media screen and (max-width:1120px) {
.map-container{ .map-container {
width: 100%; width: 100%;
position: relative; position: relative;
color: #fff; color: #fff;
} }
.map-city{
.map-city {
font-size: 60px; font-size: 60px;
position: absolute; position: absolute;
top: 180px; top: 180px;
} }
.map-company{
.map-company {
font-size: 60px; font-size: 60px;
width: 1120px; width: 1120px;
margin: 0 auto; margin: 0 auto;
...@@ -27,31 +34,37 @@ ...@@ -27,31 +34,37 @@
top: 300px; top: 300px;
} }
} }
.map-container{
.map-container {
position: relative; position: relative;
} }
.map-city,.map-company{
.map-city,
.map-company {
position: absolute; position: absolute;
} }
@media screen and (min-width:1120px) and (max-width:1200px){ @media screen and (min-width:1120px) and (max-width:1200px) {
.menu-container{ .menu-container {
max-width:1200px; max-width: 1200px;
} }
} }
@media screen and (min-width:1200px) and (max-width:1920px){
.map-container{ @media screen and (min-width:1200px) and (max-width:1920px) {
.map-container {
width: 100%; width: 100%;
position: relative; position: relative;
color: #fff; color: #fff;
} }
.map-city{
.map-city {
font-size: 60px; font-size: 60px;
position: absolute; position: absolute;
top: 180px; top: 180px;
left: 200px; left: 200px;
} }
.map-company{
.map-company {
font-size: 60px; font-size: 60px;
width: 1120px; width: 1120px;
margin: 0 auto; margin: 0 auto;
...@@ -60,19 +73,22 @@ ...@@ -60,19 +73,22 @@
left: 200px; left: 200px;
} }
} }
@media screen and (min-width:1920px){
.map-container{ @media screen and (min-width:1920px) {
.map-container {
width: 100%; width: 100%;
position: relative; position: relative;
color: #fff; color: #fff;
} }
.map-city{
.map-city {
font-size: 60px; font-size: 60px;
position: absolute; position: absolute;
top: 180px; top: 180px;
left: 400px; left: 400px;
} }
.map-company{
.map-company {
font-size: 60px; font-size: 60px;
width: 1120px; width: 1120px;
margin: 0 auto; margin: 0 auto;
...@@ -82,215 +98,937 @@ ...@@ -82,215 +98,937 @@
} }
} }
.new-tt{ .new-tt {
font-size: 20px; font-size: 20px;
color: #333; color: #333;
font-weight: 700; font-weight: 700;
} }
.gallery-thumbs{
.gallery-thumbs {
width: 1120px; width: 1120px;
} }
.gallery-thumbs-box{
.gallery-thumbs-box {
height: 140px; height: 140px;
padding: 10px 0; padding: 10px 0;
} }
.video-play{
.video-play {
position: absolute; position: absolute;
width: 770px; width: 770px;
height: auto; height: auto;
} }
.activity-container{
.activity-container {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;
background:url(https://mgmt.dfangche.com/xxfccn/image/home/background01.jpg) no-repeat; /* background: url(https://mgmt.dfangche.com/xxfccn/image/home/background01.jpg) no-repeat; */
background: rgb(242, 242, 242);
} }
.vehicle-container{ .activity-container .title {
color: #000;
}
.swiper-containerActivity {
width: 1120px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.swiper-containerActivity .swiper-wrapper {
width: 100%;
}
.swiper-containerActivity .swiper-wrapper .swiper-slide {
width: 100%;
}
.swiper-containerActivity .swiper-wrapper .swiper-slide img {
width: 100%;
height: 320px;
}
.swiper-containerActivity .left {
width: 49.5%;
float: left;
background: #fff;
padding-bottom: 10px;
transition: all 0.2s linear;
}
.swiper-containerActivity :hover .left {
box-shadow: -1px 4px 12px rgba(0, 0, 0, .1);
}
.swiper-containerActivity .left h3,
.swiper-containerActivity .left p {
text-indent: 1em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.swiper-containerActivity h3 {
margin-bottom: 10px;
font-size: 16px;
}
.swiper-containerActivity p {
line-height: 22px;
color: #666;
font-size: 14px;
}
.swiper-containerActivity ul {
width: 49.5%;
float: right;
padding-left: 0;
}
.swiper-containerActivity ul li {
padding: 10px 10px;
margin-bottom: 10px;
background: #fff;
transition: all 0.2s linear;
}
.swiper-containerActivity ul li:hover {
box-shadow: -1px 4px 12px rgba(0, 0, 0, .1);
}
.vehicle-container {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-position:bottom; background-position: bottom;
position: relative; position: relative;
} }
.vehicle-bg{
background:url(https://mgmt.dfangche.com/xxfccn/image/home/background02.jpg) no-repeat; .vehicle-bg {
background: url(https://mgmt.dfangche.com/xxfccn/image/home/background02.jpg) no-repeat;
} }
.tour-t-l-00, .tour-b-r-01, .tour-t-r-02, .tour-b-l-03, .tour-t-l-04, .tour-b-r-05{
.tour-t-l-00,
.tour-b-r-01,
.tour-t-r-02,
.tour-b-l-03,
.tour-t-l-04,
.tour-b-r-05 {
cursor: pointer; cursor: pointer;
} }
.tour-t-l-00:hover .show-detail, .tour-t-r-01:hover .show-detail, .tour-t-r-02:hover .show-detail,
.tour-t-l-03:hover .show-detail, .tour-t-l-04:hover .show-detail{ .tour-t-l-00:hover .show-detail,
.tour-t-r-01:hover .show-detail,
.tour-t-r-02:hover .show-detail,
.tour-t-l-03:hover .show-detail,
.tour-t-l-04:hover .show-detail {
display: block; display: block;
} }
.tour-b-r-05:hover .show-detail{
.tour-b-r-05:hover .show-detail {
display: block; display: block;
top: 170px; top: 170px;
right: 0px; right: 0px;
} }
.tour-t-l-00 .show-detail, .tour-b-r-05 .show-detail{
.tour-t-l-00 .show-detail,
.tour-b-r-05 .show-detail {
display: none; display: none;
background: #000; /* background: #000;
opacity: 0.6; opacity: 0.6; */
background: rgba(0, 0, 0, .6);
opacity: unset;
width: 518px; width: 518px;
height: 348px; height: 348px;
position: absolute; position: absolute;
top: 0; top: 0;
text-align: center; text-align: center;
line-height: 300px; /* line-height: 300px; */
color: #000; line-height: normal;
color: #fff;
}
.tour-t-l-00-title,
.tour-t-l-00-content {
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
padding: 0 20px;
}
.tour-t-l-00 .tour-t-l-00-title,
.tour-b-r-05 .tour-t-l-00-title {
margin-top: 26%;
font-size: 18px;
}
.tour-t-l-00 .tour-t-l-00-content,
.tour-t-l-05,
.tour-t-l-00-content {
margin-top: 10px;
font-size: 14px;
} }
.tour-t-r-01 .show-detail,.tour-t-r-02 .show-detail{
.tour-t-r-01 .show-detail,
.tour-t-r-02 .show-detail {
display: none; display: none;
background: #000; background: rgba(0, 0, 0, .6);
opacity: 0.6; opacity: unset;
width: 255px; width: 255px;
height: 160px; height: 160px;
position: absolute; position: absolute;
top: 0; top: 0;
text-align: center; text-align: center;
line-height: 160px; line-height: normal;
color: #000; color: #fff;
}
.tour-t-r-01 .tour-t-l-00-title,
.tour-t-l-03 .tour-t-l-00-title,
.tour-t-l-04 .tour-t-l-00-title,
.tour-t-r-02 .tour-t-l-00-title {
margin-top: 18%;
font-size: 16px;
padding: 0 5px;
}
.tour-t-r-01 .tour-detail,
.tour-t-l-03 .tour-detail,
.tour-t-l-04 .tour-detail,
.tour-t-r-02 .tour-detail {
padding: 5px 50px 5px 37px;
}
.tour-t-r-01 .tour-detail img,
.tour-t-l-03 .tour-detail img,
.tour-t-l-04 .tour-detail img,
.tour-t-r-02 .tour-detail img {
top: 4px;
}
.tour-t-r-01 .tour-t-l-00-content,
.tour-t-l-03 .tour-t-l-00-title,
.tour-t-l-04 .tour-t-l-00-title,
.tour-t-r-02,
.tour-t-l-00-content {
font-size: 12px;
padding: 0 10px;
} }
.tour-t-l-03 .show-detail,.tour-t-l-04 .show-detail{
.tour-t-l-03 .show-detail,
.tour-t-l-04 .show-detail {
display: none; display: none;
background: #000; background: rgba(0, 0, 0, .6);
opacity: 0.6; opacity: unset;
width: 255px; width: 255px;
height: 160px; height: 160px;
position: absolute; position: absolute;
top: 357px; top: 357px;
text-align: center; text-align: center;
line-height: 160px; line-height: normal;
color: #000; color: #fff;
} }
.more-container{
.more-container {
position: relative; position: relative;
margin-bottom: 50px; margin-bottom: 50px;
} }
.tour-t{ .tour-t {
color: #666; color: #666;
padding: 15px 30px; padding: 15px 18px;
display: flex; display: flex;
border: 1px solid #eee; border: 1px solid #eee;
cursor: pointer;
} }
/*.tour-t:hover{*/
/*background: linear-gradient(to right, #5DE6AD , #3EC6AD);*/ .tour-t-s,
/*color: #fff;*/ .tour-t-s-b {
/*padding: 10px;*/
/*display: flex;*/
/*}*/
/*.tour-t:hover .tour-t-s{*/
/*color: #fff;*/
/*}*/
/*.tour-t:hover .tour-t-s-b{*/
/*border-bottom: 3px solid #fff;*/
/*}*/
.tour-t-s, .tour-t-s-b{
font-size: 54px; font-size: 54px;
color: #E1E1E1; color: #E1E1E1;
font-weight: 100; font-weight: 100;
margin: 0 auto; margin: 0 auto;
} }
.tour-t-s-b{
.tour-t-s-b {
border-bottom: 3px solid #e1e1e1; border-bottom: 3px solid #e1e1e1;
width: 20px; width: 20px;
} }
/*.tour-t:hover .tour-t-s-b{*/
/*color: #fff;*/ .tour-t-s-t {
/*border-bottom: 3px solid #fff;*/
/*}*/
.tour-t-s-t{
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
margin-bottom: 22px; margin-bottom: 22px;
} }
.item-c{
.item-c {
/*width: 600px;*/ /*width: 600px;*/
/*height: 150px;*/ /*height: 150px;*/
padding: 10px; padding: 10px;
margin: 10px; margin: 10px;
} }
.title{
.title {
width: 1200px; width: 1200px;
padding: 10px; padding: 10px;
padding-top: 100px; padding-top: 80px;
font-size: 30px; font-size: 30px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.item-c-img{
.item-c-img {
width: 180px; width: 180px;
height: 135px; height: 135px;
margin-right: 20px; margin-right: 20px;
} }
.item-c-r{
.item-c-r {
width: 350px; width: 350px;
height: 135px; height: 135px;
} }
.item-c-r .desc{
.item-c-r .desc {
margin: 28px 0; margin: 28px 0;
font-size: 14px; font-size: 14px;
color: #666; color: #666;
} }
.item-c-r .time{
.item-c-r .time {
font-size: 13px; font-size: 13px;
color: #666; color: #666;
} }
.line-title{
.line-title {
background: #1bbb9f; background: #1bbb9f;
width: 30px; width: 30px;
height: 5px; height: 5px;
margin: 0 auto; margin: 0 auto;
} }
.swiper-container-top { .swiper-container-top {
width: 1120px; width: 1120px;
height: 481px; height: 481px;
} }
.gallery-top img{
.gallery-top img {
width: 100%; width: 100%;
height: 481px; height: 481px;
} }
.swiper-wrapper-thu{
.swiper-wrapper-thu {
/*max-width: 293px;*/ /*max-width: 293px;*/
margin: 0 !important; margin: 0 !important;
} }
.swiper-wrapper-thu img{
.swiper-wrapper-thu img {
width: 275px; width: 275px;
height: 120px; height: 120px;
/*border: 2px solid #fff;*/ /*border: 2px solid #fff;*/
} }
.swiper-wrapper-thu img.active, .swiper-wrapper-thu img:hover{
.swiper-wrapper-thu img.active,
.swiper-wrapper-thu img:hover {
border: 2px solid #1bbb9f; border: 2px solid #1bbb9f;
padding: 5px; padding: 5px;
width: 271px; width: 271px;
height: 116px; height: 116px;
} }
.swiper-slide{
.swiper-slide {
/*margin-right: 0 !important;*/ /*margin-right: 0 !important;*/
} }
.min-win-hc{
width: 1070px; .min-win-hc {
width: 922px;
} }
.tour-detail{ .tour-detail {
border: 1px solid rgb(255, 255, 255); border: 1px solid rgb(255, 255, 255);
padding: 10px; padding: 10px;
color: #fff; color: #fff;
display: inline-block;
margin-top: 20px;
font-size: 14px; font-size: 14px;
} }
.show-detail span{ .show-detail span {
border: 1px solid rgb(255, 255, 255); border: 1px solid rgb(255, 255, 255);
padding: 10px 40px 10px 20px; padding: 10px 40px 10px 20px;
color: #fff; color: #fff;
font-size: 14px; font-size: 14px;
position: relative; position: relative;
} }
.show-detail img{
.show-detail img {
position: absolute; position: absolute;
top: 10px; top: 10px;
margin-left: 5px; margin-left: 5px;
} }
.choiceness {
width: 1120px;
}
.choiceness-type {
width: 180px;
background: rgb(242, 242, 242);
display: inline-block;
float: left;
font-size: 18px;
color: #333;
height: 639px;
position: relative;
}
.choiceness-type ul {
padding: 40px 0 0 0;
}
.choiceness-type ul li {
margin-bottom: 30px;
text-align: center;
}
.choiceness-type ul li:hover a{
color: #1bbb9f;
}
/* .choiceness-type ul li:hover a {
color: #1bbb9f;
}
.choiceness-type ul li a {
transition: all 0.2s linear;
} */
.choiceness-content {
width: 922px;
display: inline-block;
overflow: hidden;
float: right;
}
.choicenessActive a {
color: #1bbb9f;
}
.tourActive {
background: #1bbb9f;
color: #fff;
transition: all .3s ease;
color: #fff;
}
.tourActive .tour-t-s,
.tour-t-s-b {
color: #fff;
}
.idnexCar {
position: absolute;
width: 200px;
left: -14px;
}
.hot-car {
background: rgb(68, 68, 68);
position: relative;
}
.embellish-1,
.embellish-2,
.embellish-3 {
border-radius: 40px;
border: 1px solid rgb(102, 102, 102);
position: absolute;
z-index: 0;
}
.embellish-1 {
width: 562px;
height: 162px;
top: 212px;
left: -40px;
}
.embellish-2 {
width: 160px;
height: 240px;
bottom: -52px;
left: 312px;
}
.embellish-3 {
width: 562px;
height: 162px;
top: 149px;
right: -112px;
}
/* .hot-car .flex-aic-jcb a{
color: #fff;
} */
.hot-car .min-win .v-type-ul {
color: #fff;
}
.hot-car .min-win .v-type-ul ul li {
color: #fff;
padding: 20px 0;
line-height: 2px;
}
.hot-car .min-win {
position: relative;
z-index: 1;
}
.hot-car .min-win .v-type-ul ul {
margin: 0;
}
.hot-car .min-win a {
position: absolute;
top: 0;
right: 0;
}
.hot-car .min-win ul .hotActiveBtn {
background: #1bbb9f;
}
.hot-car .min-win .left,
.hot-car .min-win .left .right {
margin-top: 40px;
width: 1180px;
}
.hot-car .min-win .left>ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.hot-car .min-win .left>ul>li {
width: 49%;
background: #fff;
}
.left-content {
display: inline-block;
padding: 0;
width: 66px;
float: right;
}
.left-content li {
border: 1px solid #d9d9d9;
width: 46px;
height: 46px;
text-align: center;
line-height: 46px;
margin: 0 auto;
margin-top: 13px;
cursor: pointer;
}
.pic-show {
width: 492px;
display: inline-block;
position: relative;
}
.pic-show img {
width: 100%;
height: 247px;
vertical-align: middle;
}
.pic-show p {
position: absolute;
bottom: 10px;
left: 10px;
width: 131px;
height: 40px;
background: rgba(0, 0, 0, 0.6);
color: #fff;
line-height: 40px;
}
.pic-show p span:nth-child(1) {
position: absolute;
top: -21px;
left: 13px;
background: #1bbb9f;
padding: 0px 5px;
font-size: 13px;
}
.pic-show p span:nth-child(2) {
display: block;
text-indent: 40px;
}
.hotActiveTitle {
border: 1px solid #1bbb9f !important;
background: #d7f3ee;
color: #1bbb9f;
}
.flex-fdc-jcc .right ul {
display: flex;
justify-content: space-between;
height: 514px;
}
.flex-fdc-jcc .right ul li {
flex-direction: column;
width: 343px;
text-align: center;
background: #fff;
color: #333;
line-height: 30px;
padding: 30px 0;
}
.flex-fdc-jcc .right ul li>img{
/* border: 1px solid red; */
width: 114px;
}
.flex-fdc-jcc .right ul li>p:nth-child(2) {
font-size: 16px;
font-weight: bold;
}
.flex-fdc-jcc .right ul li>p:nth-child(3) {
font-size: 16px;
color: #1bbb9f;
}
.flex-fdc-jcc .right ul li>p:nth-child(4) {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 2px;
background: rgb(204, 204, 204);
transform: rotate(45deg);
position: relative;
margin-top: 20px;
}
.flex-fdc-jcc .right ul li p:nth-child(4)::after {
content: '';
width: 130px;
height: 1px;
background: rgb(204, 204, 204);
position: absolute;
top: -52px;
left: -3px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.flex-fdc-jcc .right ul li p:nth-child(4)::before {
content: '';
width: 130px;
height: 1px;
background: rgb(204, 204, 204);
position: absolute;
top: 61px;
right: -3px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.membership-rules {
color: #666;
font-size: 14px;
padding: 0 20px;
text-align: left;
margin-top: 20px;
}
.membership-rules button {
border: none;
color: #1bbb9f;
width: 100%;
background: none !important;
cursor: pointer;
}
.purchase {
display: flex;
justify-content: space-around;
padding: 0 25px;
position: relative;
margin-top: 20px;
}
.purchase div {
flex-direction: column;
/* text-align: center; */
line-height: 20px;
}
.purchase div img {
width: 95px;
height: 95px;
display: block;
margin: 0 auto;
}
.purchase div span {
font-size: 12px;
margin-top: 10px;
}
.annotation {
position: absolute;
bottom: -80px;
color: #999;
font-size: 12px;
}
.miniPic1,
.miniPic2,
.miniPic3 {
width: 80px;
/* height: 80px; */
}
.flex-aic-jcb-warp {
width: 1120px;
}
.flex-aic-jcb-warp .left {
width: 540px;
height: 426px;
background: rgb(242, 242, 242);
padding: 30px;
display: inline-block;
}
.flex-aic-jcb-warp .left h3 {
font-size: 16px;
margin-bottom: 20px;
}
.flex-aic-jcb-warp .left p {
color: #666;
font-size: 14px;
margin-bottom: 30px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.flex-aic-jcb-warp .left img {
width: 478px;
height: 278px;
}
.flex-aic-jcb-warp .right {
float: right;
padding: 0;
}
.flex-aic-jcb-warp .right li {
padding: 0 10px;
height: 50px;
line-height: 50px;
width: 567px;
border-bottom: 1px solid #d9d9d9;
}
.flex-aic-jcb-warp .right li span {
display: inline-block;
}
.flex-aic-jcb-warp .right li a {
color: #666;
font-size: 14px;
}
.flex-aic-jcb-warp .right li:hover {
background: #1bbb9f;
}
.flex-aic-jcb-warp .right li:hover a {
color: #fff;
font-size: 16px;
}
.flex-aic-jcb-warp .right li:hover span:nth-child(1) {
width: 430px;
}
.flex-aic-jcb-warp .right li span:nth-child(1) {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 442px;
margin-right: 13px;
}
.flex-aic-jcb-warp .right li span:nth-child(2) {
position: relative;
top: -17px;
}
.city-covers {
width: 1120px;
margin: 0 auto;
position: absolute;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -565px;
}
.introduce {
width: 461px;
background: rgba(0, 0, 0, .4);
display: inline-block;
height: 380px;
margin-top: 13px;
padding: 30px;
}
.introduce h3 {
font-size: 16px;
margin-bottom: 20px;
}
.introduce>p:nth-child(2) {
color: #999;
font-size: 14px;
margin-bottom: 60px;
}
.introduce ul {
margin-top: 20px;
overflow: hidden;
padding: 0;
}
.introduce ul li {
width: 50%;
float: left;
}
.introduce ul li p:nth-child(1) {
font-size: 50px;
}
.introduce ul li p:nth-child(2) {
color: #666;
}
.look-info {
display: inline-block;
width: 117px;
height: 35px;
line-height: 35px;
background: #1bbb9f;
text-align: center;
cursor: pointer;
margin-top: 10px;
}
.campsite {
width: 1120px;
margin: 0 auto;
}
.campsite .left {
width: 360px;
border: 1px solid #e5e5e5;
display: inline-block;
}
.campsite .left-title {
background: #000;
color: #fff;
padding: 19px 15px;
}
.campsite .left-title span:nth-child(2) {
float: right;
color: #999;
}
.campsite .left img {
padding: 15px;
}
.campsite .left ul {
padding: 0 15px 20px 15px;
}
.campsite .left ul li {
font-size: 16px;
color: #333;
padding: 4px 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition: all 0.65s linear;
}
.campsite .left ul li :hover {
color: #1bbb9f;
}
.campsite .right{
float: right;
width: 739px;
height: 479px;
display: inline-block;
border: 1px solid #e5e5e5;
}
.campsite .adress{
float: right;
/* margin-right: 30px; */
width: 340px;
}
.campsite .adress p{
color: #666;
font-size: 14px;
}
.campsite .adress p:nth-child(1){
font-size: 20px;
color: #333;
margin-bottom: 30px;
font-weight: bold;
}
.campsite .adress p:nth-child(2){
margin-bottom: 5px;
}
.campsite .company-address{
padding: 0;
margin-top: 15px;
}
.campsite .company-address li{
margin-top: 10px;
}
.campsite .company-address li a:hover{
color: #1bbb9f;
}
.campsite .company-address li a:hover span{
color: #1bbb9f !important;
}
.campsite .company-address li span:nth-child(2){
margin-left: 10px;
color: #999;
}
.campsite .company-address li span:nth-child(3){
float: right;
}
\ No newline at end of file
assets/main.css
View file @ 57f155a0
...@@ -136,7 +136,7 @@ body { ...@@ -136,7 +136,7 @@ body {
} }
.main-container{ .main-container{
margin-top:174px; margin-top:170px;
min-height: 600px; min-height: 600px;
min-width: 1120px; min-width: 1120px;
overflow: hidden; overflow: hidden;
......
assets/menu.css
View file @ 57f155a0
...@@ -128,7 +128,7 @@ ...@@ -128,7 +128,7 @@
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
background-color: #333; background-color: #333;
height: 54px; height: 50px;
} }
.users { .users {
list-style-type: none; list-style-type: none;
...@@ -201,7 +201,6 @@ a{ ...@@ -201,7 +201,6 @@ a{
} }
.menu-select{ .menu-select{
width: 500px !important; width: 500px !important;
position: absolute;
} }
.help:hover a{ .help:hover a{
color:#1BBB9F; color:#1BBB9F;
......
components/banner.vue
View file @ 57f155a0
<template> <template>
<div class="banner banner-b-n-n"> <div class="banner banner-b-n-n">
<div class="box"> <div class="box">
<ul> <ul>
<li v-for="(item, index) in list" :key="item.id" :class="index === current ? 'active' : ''" @click="bannerClick(index, item)"> <li
<img :src= "item.cover" style="width:100%;height:560px;min-height: 350px;" :alt="item.alt"/> v-for="(item, index) in list"
</li> :key="item.id"
</ul> :class="index === current ? 'active' : ''"
<div class="status"> @click="bannerClick(index, item)"
<span class="name-t ellipsis" v-for="(item, index) in list" :key="item.id" :class="index === current ? 'active' : ''" >
@mouseenter="changeBanner(index)" <!-- <img :src= "item.cover" style="width:100%;height:560px;min-height: 350px;" :alt="item.alt"/> -->
@mouseleave="startLoop" <img :src="item.cover" style="width:100%;" :alt="item.alt" />
>{{item.title}} </li>
</span> </ul>
</div> <div class="status">
</div> <span
</div> class="name-t ellipsis"
v-for="(item, index) in list"
:key="item.id"
:class="index === current ? 'active' : ''"
@mouseenter="changeBanner(index)"
@mouseleave="startLoop"
>{{item.title}}</span>
</div>
</div>
</div>
</template> </template>
<script> <script>
export default { export default {
name: 'banner', name: 'banner',
data() { data() {
return { return {
current: 0, // 当前索引 current: 0, // 当前索引
timerId: null, // 清除循环标记 timerId: null, // 清除循环标记
intStyle: {} intStyle: {}
} }
}, },
props: [ props: [
'list', 'list',
'looptime', 'looptime',
'height', 'height',
'width', 'width',
'background', 'background',
'color', 'color',
'fontSize' 'fontSize'
], ],
methods: { methods: {
getArticle () { getArticle() {
this.$emit('getArticle', this.article) this.$emit('getArticle', this.article)
}, },
// 鼠标移入状态圆点 // 鼠标移入状态圆点
changeBanner (index) { changeBanner(index) {
this.$emit('change', this.current); this.$emit('change', this.current)
this.stopLoop(); this.stopLoop()
this.current = index; this.current = index
}, },
// 鼠标点击banner内容 // 鼠标点击banner内容
bannerClick (index, item) { bannerClick(index, item) {
this.$emit('click', index, item); this.$emit('click', index, item)
}, },
// 点击上一张按钮 // 点击上一张按钮
prev () { prev() {
if(this.current > 0) { if (this.current > 0) {
// 将对象列表对应的索引和整个对象传出去 // 将对象列表对应的索引和整个对象传出去
this.$emit('prev', this.current, this.list); this.$emit('prev', this.current, this.list)
this.current--; this.current--
} else { } else {
this.$emit('prev', this.current, this.list); this.$emit('prev', this.current, this.list)
this.current = this.list.length - 1 ; this.current = this.list.length - 1
} }
}, },
// 点击下一张按钮 // 点击下一张按钮
next () { next() {
if(this.current < this.list.length - 1) { if (this.current < this.list.length - 1) {
this.$emit('prev', this.current, this.list); this.$emit('prev', this.current, this.list)
this.current ++; this.current++
} else { } else {
this.$emit('prev', this.current, this.list); this.$emit('prev', this.current, this.list)
this.current = 0; this.current = 0
} }
}, },
// 鼠标移出继续循环播放 // 鼠标移出继续循环播放
startLoop () { startLoop() {
this.int(4000); this.int(4000)
}, },
// 鼠标移入停止循环播放 // 鼠标移入停止循环播放
stopLoop () { stopLoop() {
clearTimeout(this.timerId); // 清除循环 clearTimeout(this.timerId) // 清除循环
}, },
// 初始化加载 // 初始化加载
int (time){ int(time) {
this.timerId = setInterval(()=> { this.timerId = setInterval(() => {
this.next(); this.next()
}, time); }, time)
// 初始化样式 // 初始化样式
this.intStyle = { this.intStyle = {
width: this.width + 'px', width: this.width + 'px',
height: this.height + 'px', height: this.height + 'px',
background: this.background, background: this.background,
color: this.color color: this.color
} }
} }
}, },
created () { created() {
this.int(4000); this.int(4000)
} }
} }
</script> </script>
<style> <style>
@import "../assets/banner.css"; @import '../assets/banner.css';
</style> </style>
components/footer.vue
View file @ 57f155a0
<template> <template>
<div class="footer-container"> <div class="footer-container">
<!--<img src="../assets/images/footer.jpg" style="width:100%;position:relative;z-index:-1" alt="欣新房车，让生活更美好">--> <div class="foot-content">
<div class="footer"> <div class="footer">
<div>
<p class="links-title">
<span>LINK</span>
<span>友情链接</span>
</p>
<ul class="link-list">
<li v-for="(item,index) in list" :key="index">
<a :href="item.linkUrl" :title="item.brief">{{ item.name }}</a>
</li>
</ul>
</div>
</div>
</div>
<div class="bottom-main">
<div class="hot-tel">
<p>24小时客服竭诚为您服务</p>
<p>
<span class="iconfont icon24xiaoshi"></span>4000-369-369
</p>
</div>
<div class="adress">
<p>
<span class="iconfont iconditu"></span>广东省东莞市松山湖工业西路12号 欣新房车控股集团(东莞)股份有限公司
</p>
<p>
©欣新房车控股集团（东莞）股份有限公司2019保留一切权利
备案号：
粤ICP备19072339号-1
</p>
</div>
</div>
<!-- <nuxt-link :to="item.linkUrl">{{ item.name }}</nuxt-link> -->
<!-- <div class="footer">
<div class="flex-aic-jcb" style="height: 200px;width: 100%;border-bottom: 1px solid #323737"> <div class="flex-aic-jcb" style="height: 200px;width: 100%;border-bottom: 1px solid #323737">
<div class="flex-aic"> <div class="flex-aic">
<div class="footer-scan"> <div class="footer-scan">
...@@ -27,7 +61,6 @@ ...@@ -27,7 +61,6 @@
<div class=" flex-aic-jcc"> <div class=" flex-aic-jcc">
<ul class="fri" v-if="listShow"> <ul class="fri" v-if="listShow">
<li v-for="(item,index) in list" :key="index"> <li v-for="(item,index) in list" :key="index">
<!-- <nuxt-link :to="item.linkUrl">{{ item.name }}</nuxt-link> -->
<a :href="item.linkUrl" :title="item.brief">{{ item.name }}</a> <a :href="item.linkUrl" :title="item.brief">{{ item.name }}</a>
<span>|</span> <span>|</span>
</li> </li>
...@@ -36,38 +69,116 @@ ...@@ -36,38 +69,116 @@
<div class="link-f flex-aic-jcc"> <div class="link-f flex-aic-jcc">
©欣新房车控股集团（东莞）股份有限公司2019保留一切权利 ©欣新房车控股集团（东莞）股份有限公司2019保留一切权利
<span style="margin-left: 5px;">备案号：</span><a href="http://beian.miit.gov.cn" rel="nofollow" target="_blank">粤ICP备19072339号-2</a> <span style="margin-left: 5px;">备案号：</span><a href="http://beian.miit.gov.cn" rel="nofollow" target="_blank">粤ICP备19072339号-2</a>
</div> </div>-->
</div> </div>
</template> </template>
<script> <script>
import axios from '../plugins/axios' import axios from '../plugins/axios'
export default { export default {
transition: 'bounce', transition: 'bounce',
name: 'footerModal', name: 'footerModal',
props: [], props: [],
data () { data() {
return { return {
list:[], list: [],
listShow:false listShow: false
} }
}, },
created() { created() {
this.getAll(); this.getAll()
}, },
methods:{ methods: {
async getAll() { async getAll() {
let { let {
data: { data } data: { data }
} = await axios.get( "/api/uccn/app/unauth/friend_link/list"); } = await axios.get('/api/uccn/app/unauth/friend_link/list')
if(data.length == 0){ if (data.length == 0) {
this.listShow = false this.listShow = false
}else{ } else {
this.listShow = true this.listShow = true
} }
this.list = data; this.list = data
console.log(data); }
}, }
} }
}
</script> </script>
<style>
.footer {
display: block;
}
.foot-content {
width: 100%;
border-bottom: 1px solid #444;
}
.links-title {
display: inline-block;
width: 169px;
}
.links-title span:nth-child(1) {
font-weight: bold;
color: #1bbb9f;
font-size: 40px;
font-style: italic;
}
.links-title span:nth-child(2) {
position: relative;
top: -8px;
left: 4px;
}
.link-list {
margin-top: 15px;
overflow: hidden;
display: inline-block;
}
.link-list li {
float: left;
margin-right: 95px;
line-height: 25px;
}
.link-list li a {
font-size: 16px;
color: #cccccc;
}
.link-list li a:hover {
color: #1bbb9f;
}
.bottom-main {
width: 1120px;
margin: 0 auto;
margin-top: 30px;
}
.hot-tel {
display: inline-block;
}
.hot-tel p:nth-child(1) {
color: #999;
}
.hot-tel p:nth-child(2) {
display: inline-block;
font-size: 29px;
background: #1bbb9f;
padding: 16px 15px;
border-radius: 10px;
margin-top: 15px;
}
.hot-tel p:nth-child(2) span {
font-size: 29px;
margin-right: 10px;
}
.bottom-main .adress {
display: inline-block;
float: right;
text-align: center;
margin-top: 44px;
}
.bottom-main .adress p:nth-child(1){
font-size: 16px;
color: #ccc;
}
.bottom-main .adress p:nth-child(2){
font-size: 12px;
color: #999;
margin-top: 20px;
}
</style>
\ No newline at end of file
nuxt.config.js
View file @ 57f155a0
...@@ -12,10 +12,10 @@ module.exports = { ...@@ -12,10 +12,10 @@ module.exports = {
link: [ link: [
{ rel: 'icon', type: 'image/x-icon', href: 'https://mgmt.dfangche.com/xxfccn/image/1/app/5d9c62b7412efd926f70e0ed5efb19a.png' }, { rel: 'icon', type: 'image/x-icon', href: 'https://mgmt.dfangche.com/xxfccn/image/1/app/5d9c62b7412efd926f70e0ed5efb19a.png' },
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic' }, { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic' },
{ rel: 'stylesheet', href: 'https://mgmt.dfangche.com/xxfccn/css/pc/main.css' }, // { rel: 'stylesheet', href: 'https://mgmt.dfangche.com/xxfccn/css/pc/main.css' },
{ rel: 'stylesheet', href: 'https://mgmt.dfangche.com/xxfccn/css/pc/menu.css' }, // { rel: 'stylesheet', href: 'https://mgmt.dfangche.com/xxfccn/css/pc/menu.css' },
{ rel: 'stylesheet', href: 'https://mgmt.dfangche.com/xxfccn/css/pc/footer.css' }, { rel: 'stylesheet', href: 'https://mgmt.dfangche.com/xxfccn/css/pc/footer.css' },
{ rel: 'stylesheet', href: 'https://mgmt.dfangche.com/xxfccn/css/pc/index.css' }, // { rel: 'stylesheet', href: 'https://mgmt.dfangche.com/xxfccn/css/pc/index.css' },
{ rel: 'stylesheet', href: 'https://mgmt.dfangche.com/xxfccn/css/pc/goTop.css' }, { rel: 'stylesheet', href: 'https://mgmt.dfangche.com/xxfccn/css/pc/goTop.css' },
{ rel: 'stylesheet', href: 'https://mgmt.dfangche.com/xxfccn/css/pc/swiper.min.css' }, { rel: 'stylesheet', href: 'https://mgmt.dfangche.com/xxfccn/css/pc/swiper.min.css' },
{ rel: 'stylesheet', href: 'https://www.xxfangche.com/xxfccn/css/pc/el/index.css' } { rel: 'stylesheet', href: 'https://www.xxfangche.com/xxfccn/css/pc/el/index.css' }
...@@ -24,8 +24,7 @@ module.exports = { ...@@ -24,8 +24,7 @@ module.exports = {
{ src: 'https://dev.dfangche.com/h5/appHtml/js/util.js' }, { src: 'https://dev.dfangche.com/h5/appHtml/js/util.js' },
], ],
}, },
css: [ css: ['~/assets/index.css','~/assets/menu.css','~/assets/main.css','~/assets/font/iconfont.css'],
],
loading: '~/components/loading.vue', loading: '~/components/loading.vue',
......
pages/index.vue
View file @ 57f155a0
<template> <template>
<div class="container" style="background: #fff;"> <div class="container" style="background: #fff;">
<menu-modal></menu-modal> <menu-modal></menu-modal>
<div class="main-container" id="scroll-area"> <div class="main-container" id="scroll-area">
<banner <!-- 顶部轮播图 -->
:list = "bannerList" <banner
:looptime="looptime" :list="bannerList"
:width="width" :looptime="looptime"
:height="height" :width="width"
:background="background" :height="height"
:color="color" :background="background"
:fontSize="fontSize" :color="color"
@prev="prev" :fontSize="fontSize"
@next="next" @prev="prev"
@change="changeBanner" @next="next"
@click="bannerClick" @change="changeBanner"
class="mb-50"> @click="bannerClick"
</banner> class="mb-50"
<div class="flex-fdc-jcc video-container"> ></banner>
<div class="tc title">3分钟了解欣新房车</div>
<div class="flex-aic-jcb more-container">
<div style="width: 1100px;text-align: center">
<div class="line-title"></div>
</div>
</div>
<img src="https://mgmt.dfangche.com/xxfccn/image/home/television.png" style="width: 1200px;"/>
<!--autoplay="autoplay"-->
<video class="video-play" width="320" height="240" preload="auto" controls muted poster="https://mgmt.dfangche.com/xxfccn/image/home/video.jpg">
<source src="https://mgmt.dfangche.com/xxfccn/xxfccn.mp4" type="video/mp4">
您的浏览器不支持 HTML5 video 标签。
</video>
</div>
<div class="flex-fdc-jcc activity-container" style="padding: 30px 0;"> <!-- 精选房车游 -->
<div class="tc title" style="color: #fff;">最新活动 <span style="font-size: 16px;margin: 0 5px;">●</span> 从这里启程</div> <div class="flex-fdc-jcc" style="background: #fff;">
<div class="flex-aic-jcb more-container"> <div class="choiceness">
<div style="width: 1070px;text-align: center"> <div class="tc title">
<div class="line-title"></div> 精选房车游
</div> <span style="font-size: 16px;margin: 0 5px;">●</span> 说走就走的房车之旅
<nuxt-link to="/activity"><div>MORE<img src="https://mgmt.dfangche.com/xxfccn/image/home/more.png"/></div></nuxt-link> </div>
</div> <div class="flex-aic-jcb more-container">
<banner-activity <div style="width: 1070px;text-align: center">
:list = "activityList" <div class="line-title"></div>
:looptime="looptime" </div>
:width="width" <nuxt-link to="/tour?tagIds=">
:height="height" <div>
:background="background" MORE
:color="color" <img src="https://mgmt.dfangche.com/xxfccn/image/home/more.png" />
:fontSize="fontSize" </div>
@prev="prev" </nuxt-link>
@next="next" </div>
class="mb-50">
</banner-activity> <div class="choiceness-type">
</div> <p style="text-align:center;font-size:22px;font-weight: bold;padding-top:22px">房车游</p>
<div class="flex-fdc-jcc" style="background: #fff;padding: 30px 0;"> <ul>
<div class="tc title">精选房车游 <span style="font-size: 16px;margin: 0 5px;">●</span> 说走就走的房车之旅</div> <li v-for="(item,index) in hotCircuit" :key="index">
<div class="flex-aic-jcb more-container"> <nuxt-link :to="'/tour?tagIds='+item.id">{{item.name}}</nuxt-link>
<div style="width: 1029px;text-align: center"> </li>
<div class="line-title"></div> </ul>
</div> <img class="idnexCar" src="https://mgmt.dfangche.com/xxfccn/image/home/indexCar.png" alt />
</div> </div>
<div class="flex-aic-jca min-win-hc"> <div class="choiceness-content">
<div class="tour-t"> <div class="flex-aic-jca min-win-hc" style="justify-content: space-between;">
<div> <div :class="{'tour-t':true,tourActive:isTourActive == 1}" @click="choose(1)">
<div class="tour-t-s"> 01 </div> <div>
<div class="tour-t-s-b"> </div> <div class="tour-t-s">01</div>
</div> <div class="tour-t-s-b"></div>
<div style="margin-left: 12px;"> </div>
<div class="tour-t-s-t">主题线路</div> <div style="margin-left: 12px;">
<div class="ft-12">特色旅游线路</div> <div class="tour-t-s-t">热门路线</div>
<div class="ft-12">倡导全新旅程生活方式</div> <div class="ft-12">打造轻松的房车旅行</div>
</div> </div>
</div> </div>
<div class="tour-t"> <div :class="{'tour-t':true,tourActive:isTourActive == 2}" @click="choose(2)">
<div> <div>
<div class="tour-t-s"> 02 </div> <div class="tour-t-s">02</div>
<div class="tour-t-s-b"> </div> <div class="tour-t-s-b"></div>
</div> </div>
<div style="margin-left: 12px;"> <div style="margin-left: 12px;">
<div class="tour-t-s-t">全程服务</div> <div class="tour-t-s-t">特色旅游</div>
<div class="ft-12">欣新领队全程陪同</div> <div class="ft-12">特色旅游线路</div>
<div class="ft-12">个性化服务</div> <!-- <div class="ft-12">个性化服务</div> -->
</div> </div>
</div> </div>
<div class="tour-t"> <div :class="{'tour-t':true,tourActive:isTourActive == 3}" @click="choose(3)">
<div> <div>
<div class="tour-t-s"> 03 </div> <div class="tour-t-s">03</div>
<div class="tour-t-s-b"> </div> <div class="tour-t-s-b"></div>
</div> </div>
<div style="margin-left: 12px;"> <div style="margin-left: 12px;">
<div class="tour-t-s-t">详尽攻略</div> <div class="tour-t-s-t">新开辟路线</div>
<div class="ft-12">详尽旅游攻略</div> <div class="ft-12">欣新领队全程陪同</div>
<div class="ft-12">打造轻松的房车旅行</div> <!-- <div class="ft-12">打造轻松的房车旅行</div> -->
</div> </div>
</div> </div>
<div class="tour-t"> <div :class="{'tour-t':true,tourActive:isTourActive == 4}" @click="choose(4)">
<div> <div>
<div class="tour-t-s"> 04 </div> <div class="tour-t-s">04</div>
<div class="tour-t-s-b"> </div> <div class="tour-t-s-b"></div>
</div> </div>
<div style="margin-left: 12px;"> <div style="margin-left: 12px;">
<div class="tour-t-s-t">贴心售后</div> <div class="tour-t-s-t">推荐路线</div>
<div class="ft-12">7X24小时在线咨询热线</div> <div class="ft-12">全天为您服务</div>
<div class="ft-12">全天为您服务</div> <!-- <div class="ft-12">全天为您服务</div> -->
</div> </div>
</div> </div>
</div> </div>
<div style="position: relative;margin-top: 30px;" v-if="tourList.length>0" > <!-- 热门线路 -->
<div style="display: flex;"> <div
<nuxt-link :to="/tourDetails/+ tourList[0].id" v-if="tourList.length>0"> style="position: relative;margin-top: 14px;"
<div class="tour-t-l-00"> v-show="tourList.length>0 && isTourActive == isTourActive"
<img :src="tourList[0].imgUrl" style="width: 518px;height: 348px;"/> >
<div class="show-detail"> <div style="display: flex;">
<span class="tour-detail" style="border: 1px solid #fff;">查看详情<img src="https://mgmt.dfangche.com/xxfccn/image/home/more.png"/></span> <nuxt-link
</div> :to="/tourDetails/+ hotlist[isTourActives][0].id"
</div> v-if="hotlist[isTourActives].length>0"
</nuxt-link> >
<div style="margin-left: 9px;width: 518px;justify-content: space-between;display: flex;margin-bottom: 5px;"> <div class="tour-t-l-00">
<nuxt-link :to="/tourDetails/+ tourList[1].id" v-if="tourList.length>1"> <img :src="hotlist[isTourActives][0].imgUrl" style="width: 454px;height: 348px;" />
<div class="tour-t-r-01"> <div class="show-detail" style="width: 454px;height: 348px;">
<img :src="tourList[1].imgUrl" style="width: 255px;height: 160px;"/> <p class="tour-t-l-00-title">{{hotlist[isTourActives][0].name}}</p>
<div class="show-detail"> <span class="tour-detail" style="border: 1px solid #fff;">
<span class="tour-detail" style="border: 1px solid #fff;">查看详情<img src="https://mgmt.dfangche.com/xxfccn/image/home/more.png"/></span> 查看详情
</div> <img src="https://mgmt.dfangche.com/xxfccn/image/home/more.png" />
</div> </span>
</nuxt-link> </div>
<nuxt-link :to="/tourDetails/+ tourList[2].id" v-if="tourList.length>2"> </div>
<div class="tour-t-r-02"> </nuxt-link>
<img :src="tourList[2].imgUrl" style="width: 255px;height: 160px;"/>
<div class="show-detail"> <div
<span class="tour-detail" style="border: 1px solid #fff;">查看详情<img src="https://mgmt.dfangche.com/xxfccn/image/home/more.png"/></span> style="margin-left: 9px;width: 518px;justify-content: space-between;display: flex;margin-bottom: 5px;"
</div> >
</div> <nuxt-link
</nuxt-link> :to="/tourDetails/+ hotlist[isTourActives][1].id"
</div> v-if="hotlist[isTourActives].length>1"
</div> >
<div style="display: flex;margin-top: 5px;"> <div class="tour-t-r-01">
<div style="width: 518px;justify-content: space-between; display: flex;"> <img :src="hotlist[isTourActives][1].imgUrl" style="width: 226px;height: 160px;" />
<nuxt-link :to="/tourDetails/+ tourList[3].id" v-if="tourList.length>3"> <div class="show-detail" style="width: 226px;height: 160px;">
<div class="tour-t-l-03"> <p class="tour-t-l-00-title">{{hotlist[isTourActives][1].name}}</p>
<img :src="tourList[3].imgUrl" style="width: 255px;height: 160px;"/> <span class="tour-detail" style="border: 1px solid #fff;">
<div class="show-detail"> 查看详情
<span class="tour-detail" style="border: 1px solid #fff;">查看详情<img src="https://mgmt.dfangche.com/xxfccn/image/home/more.png"/></span> <img src="https://mgmt.dfangche.com/xxfccn/image/home/more.png" />
</div> </span>
</div> </div>
</nuxt-link> </div>
<nuxt-link :to="/tourDetails/+ tourList[4].id" v-if="tourList.length>4"> </nuxt-link>
<div class="tour-t-l-04"> <nuxt-link
<img :src="tourList[4].imgUrl" style="width: 255px;height: 160px;"/> :to="/tourDetails/+ hotlist[isTourActives][2].id"
<div class="show-detail"> v-if="hotlist[isTourActives].length>2"
<span class="tour-detail" style="border: 1px solid #fff;">查看详情<img src="https://mgmt.dfangche.com/xxfccn/image/home/more.png"/></span> >
</div> <div class="tour-t-r-02">
</div> <img :src="hotlist[isTourActives][2].imgUrl" style="width: 226px;height: 160px;" />
</nuxt-link> <div class="show-detail" style="width: 226px;height: 160px;">
</div> <p class="tour-t-l-00-title">{{hotlist[isTourActives][2].name}}</p>
<nuxt-link :to="/tourDetails/+ tourList[5].id" v-if="tourList.length>5"> <span class="tour-detail" style="border: 1px solid #fff;">
<div class="tour-b-r-05"> 查看详情
<img :src="tourList[5].imgUrl" style="width: 518px;height: 348px;position: absolute; top: 170px;left: 527px;"/> <img src="https://mgmt.dfangche.com/xxfccn/image/home/more.png" />
<div class="show-detail"> </span>
<span class="tour-detail" style="border: 1px solid #fff;">查看详情<img src="https://mgmt.dfangche.com/xxfccn/image/home/more.png"/></span> </div>
</div> </div>
</div> </nuxt-link>
</nuxt-link> </div>
</div> </div>
</div> <div style="display: flex;margin-top: 5px;">
</div> <div style="width: 455px;justify-content: space-between; display: flex;">
<div class="flex-fdc-jcc vehicle-container vehicle-bg" style="padding: 30px 0 155px 0;background-position: bottom;"> <nuxt-link
<div class="tc title">热门房车 <span style="font-size: 16px;margin: 0 5px;">●</span> 多款房车任你选择</div> :to="/tourDetails/+ hotlist[isTourActives][3].id"
<div class="flex-aic-jcb more-container"> v-if="hotlist[isTourActives].length>3"
<div style="width: 1160px;text-align: center"> >
<div class="line-title"></div> <div class="tour-t-l-03">
</div> <img :src="hotlist[isTourActives][3].imgUrl" style="width: 224px;height: 160px;" />
<nuxt-link to="/vehicle"><div>MORE<img src="https://mgmt.dfangche.com/xxfccn/image/home/more.png"/></div></nuxt-link> <div class="show-detail" style="width: 224px;height: 160px;">
</div> <p class="tour-t-l-00-title">{{hotlist[isTourActives][3].name}}</p>
<div class="min-win"> <span class="tour-detail" style="border: 1px solid #fff;">
<ul class="v-type-ul"> 查看详情
<li class="v-type" :class="tabIndex== 0?'v-type-active':''" @click="changeVehicle(0)">上汽大通</li> <img src="https://mgmt.dfangche.com/xxfccn/image/home/more.png" />
<li class="v-type" :class="tabIndex== 1?'v-type-active':''" @click="changeVehicle(1)">格林卡诺C2</li> </span>
<li class="v-type" :class="tabIndex== 2?'v-type-active':''" @click="changeVehicle(2)">齐星依维柯</li> </div>
<li class="v-type" :class="tabIndex== 3?'v-type-active':''" @click="changeVehicle(3)">奔驰斯宾特</li> </div>
</ul> </nuxt-link>
<div class="banner-vehicle"> <nuxt-link
<div class="gallery-top-box"> :to="/tourDetails/+ hotlist[isTourActives][4].id"
<div class="swiper-container gallery-top swiper-container-top" ref="mySwiper"> v-if="hotlist[isTourActives].length>4"
<div class="swiper-wrapper"> >
<div class="swiper-slide" v-for="item in vehicleList0" :key="item.id"> <div class="tour-t-l-04">
<img :src="item.url"> <img :src="hotlist[isTourActives][4].imgUrl" style="width: 224px;height: 160px;" />
</div> <div class="show-detail" style="width: 224px;height: 160px;">
</div> <p class="tour-t-l-00-title">{{hotlist[isTourActives][4].name}}</p>
<div class="swiper-button-next swiper-button-black"> <span class="tour-detail" style="border: 1px solid #fff;">
<img style="width: 20px;height: 20px;" src="https://mgmt.dfangche.com/xxfccn/image/home/next.png"/> 查看详情
</div> <img src="https://mgmt.dfangche.com/xxfccn/image/home/more.png" />
<div class="swiper-button-prev swiper-button-black"> </span>
<img style="width: 20px;height: 20px;" src="https://mgmt.dfangche.com/xxfccn/image/home/pre.png"/> </div>
</div> </div>
</div> </nuxt-link>
<div class="gallery-thumbs-box"> </div>
<div class="swiper-container gallery-thumbs"> <nuxt-link
<div class="swiper-wrapper swiper-wrapper-thu flex-aic-jcb"> :to="/tourDetails/+ hotlist[isTourActives][5].id"
<div class="swiper-slide" v-for="(item,index) in vehicleList0" :key="item.id" @click="changeImgIndex(index)"> v-if="hotlist[isTourActives].length>5"
<img :src="item.url" :class="preIndex==index?'active':''" alt=""> >
</div> <div class="tour-b-r-05">
</div> <img
</div> :src="hotlist[isTourActives][5].imgUrl"
</div> style="width: 459px;height: 348px;position: absolute; top: 170px;left: 463px;"
</div> />
</div> <div class="show-detail" style="width:459px">
</div> <p class="tour-t-l-00-title">{{hotlist[isTourActives][4].name}}</p>
</div> <span class="tour-detail" style="border: 1px solid #fff;">
<div class="flex-fdc-jcc" style="background: #fff;padding: 30px 0;"> 查看详情
<div class="tc title">新闻动态 <span style="font-size: 16px;margin: 0 5px;">●</span> 最新资讯与你分享</div> <img src="https://mgmt.dfangche.com/xxfccn/image/home/more.png" />
<div class="flex-aic-jcb more-container"> </span>
<div style="width: 1029px;text-align: center"> </div>
<div class="line-title"></div> </div>
</div> </nuxt-link>
<nuxt-link to="/news"><div>MORE<img src="https://mgmt.dfangche.com/xxfccn/image/home/more.png"/></div></nuxt-link> </div>
</div> </div>
<div class="flex-aic-jcb-warp min-win"> </div>
<div class="item-c flex-aic" v-for="item in newsList" :key="item.id" > </div>
<nuxt-link :to="'/newsList/'+item.id" class="flex-aic"> </div>
<img :src="item.coverImage" class="item-c-img" :alt="item.title"/>
<div class="item-c-r"> <!-- 三分钟了解欣新房车 -->
<div class="ellipsis new-tt">{{item.title}}</div> <!-- <div class="flex-fdc-jcc video-container">
<div class="desc ellipsis2">{{item.epitome}}</div> <div class="tc title">3分钟了解欣新房车</div>
<div class="time">{{item.addTime.substring(0,10)}}</div> <div class="flex-aic-jcb more-container">
</div> <div style="width: 1100px;text-align: center">
</nuxt-link> <div class="line-title"></div>
</div> </div>
</div> </div>
</div> <img src="https://mgmt.dfangche.com/xxfccn/image/home/television.png" style="width: 1200px;" />
<div class="map-container" > <video
<img style="width: 100%;" src="https://mgmt.dfangche.com/xxfccn/image/home/map.jpg"/> class="video-play"
<div class="map-city"> width="320"
<div>{{cityNum}}+</div> height="240"
<div class="ft-16">城市</div> preload="auto"
</div> controls
<div class="map-company"> muted
<div>{{comppanyNum}}+</div> poster="https://mgmt.dfangche.com/xxfccn/image/home/video.jpg"
<div class="ft-16">分公司</div> >
</div> <source src="https://mgmt.dfangche.com/xxfccn/xxfccn.mp4" type="video/mp4" />您的浏览器不支持 HTML5 video 标签。
</div> </video>
</div> </!-->
<go-top></go-top>
<footer-modal></footer-modal> <!-- 热门房车,多款房车任你选择 -->
</div> <div class="flex-fdc-jcc hot-car" style="margin-top:80px;padding-bottom:80px">
<div class="tc title" style="color: #fff;">
热门房车
<span style="font-size: 16px;margin: 0 5px;">●</span> 多款房车任你选择
</div>
<div class="flex-aic-jcb more-container">
<div style="width: 1070px;text-align: center">
<div class="line-title"></div>
</div>
</div>
<div class="min-win">
<ul class="v-type-ul" style="text-align:center;width:100%;display:block">
<li class="v-type" :class="tabIndex == 0 ? 'hotActiveBtn' : ''" @click="chooseHot(0)">房车租赁</li>
<li class="v-type" :class="tabIndex == 1 ? 'hotActiveBtn' : ''" @click="chooseHot(1)">房车会员</li>
</ul>
<nuxt-link to="vehicle?types=">
<div>
MORE
<img src="https://mgmt.dfangche.com/xxfccn/image/home/more.png" />
</div>
</nuxt-link>
<div class="left" v-if="tabIndex == 0">
<ul>
<li>
<div class="pic-show">
<img :src="vehicleList0[0].url" alt />
<p>
<span>1</span>
<span>上汽大通</span>
</p>
</div>
<ul class="left-content">
<li :class="vehicleList0[0].id == 0 ? 'hotActiveTitle' : ''" @click="hotTitleClick(0)">外观</li>
<li :class="vehicleList0[0].id == 1 ? 'hotActiveTitle' : ''" @click="hotTitleClick(1)">外观</li>
<li :class="vehicleList0[0].id == 2 ? 'hotActiveTitle' : ''" @click="hotTitleClick(2)">内饰</li>
<li :class="vehicleList0[0].id == 3 ? 'hotActiveTitle' : ''" @click="hotTitleClick(3)">内饰</li>
</ul>
</li>
<li>
<div class="pic-show">
<img :src="vehicleList0[1].url" alt />
<p>
<span>2</span>
<span>格林卡诺C2</span>
</p>
</div>
<ul class="left-content">
<li :class="vehicleList0[1].id == 0 ? 'hotActiveTitle' : ''" @click="hotTitleClick1(0)">外观</li>
<li :class="vehicleList0[1].id == 1 ? 'hotActiveTitle' : ''" @click="hotTitleClick1(1)">外观</li>
<li :class="vehicleList0[1].id == 2 ? 'hotActiveTitle' : ''" @click="hotTitleClick1(2)">内饰</li>
<li :class="vehicleList0[1].id == 3 ? 'hotActiveTitle' : ''" @click="hotTitleClick1(3)">内饰</li>
</ul>
</li>
<li style="margin-top:20px">
<div class="pic-show">
<img :src="vehicleList0[2].url" alt />
<p>
<span>3</span>
<span>齐星依维柯</span>
</p>
</div>
<ul class="left-content">
<li :class="vehicleList0[2].id == 0 ? 'hotActiveTitle' : ''" @click="hotTitleClick2(0)">外观</li>
<li :class="vehicleList0[2].id == 1 ? 'hotActiveTitle' : ''" @click="hotTitleClick2(1)">外观</li>
<li :class="vehicleList0[2].id == 2 ? 'hotActiveTitle' : ''" @click="hotTitleClick2(2)">内饰</li>
<li :class="vehicleList0[2].id == 3 ? 'hotActiveTitle' : ''" @click="hotTitleClick2(3)">内饰</li>
</ul>
</li>
<li style="margin-top:20px">
<div class="pic-show">
<img :src="vehicleList0[3].url" alt />
<p>
<span>4</span>
<span>奔驰斯宾特</span>
</p>
</div>
<ul class="left-content">
<li :class="vehicleList0[3].id == 0 ? 'hotActiveTitle' : ''" @click="hotTitleClick3(0)">外观</li>
<li :class="vehicleList0[3].id == 1 ? 'hotActiveTitle' : ''" @click="hotTitleClick3(1)">外观</li>
<li :class="vehicleList0[3].id == 2 ? 'hotActiveTitle' : ''" @click="hotTitleClick3(2)">内饰</li>
<li :class="vehicleList0[3].id == 3 ? 'hotActiveTitle' : ''" @click="hotTitleClick3(3)">内饰</li>
</ul>
</li>
</ul>
</div>
<div class="right" v-else>
<ul>
<li>
<img :src="memberList[0].bigIcon" :class="{miniPic1:!grade.common}" alt />
<p>{{memberList[0].name}}</p>
<p>{{memberList[0].price}}</p>
<p></p>
<div v-if="grade.common == true" class="membership-rules">
<p>1.尊享欣新房车永久7折租车;</p>
<p>2.尊享欣新房车任一款房车5天(A型房车与奔驰房车除外),价值1800元;</p>
<p>3.尊享欣新房车举办的各种沙龙讲座以及户外活动</p>
<button @click="PurchaseBtn">购买会员 ></button>
</div>
<div v-else class="purchase">
<div>
<img src="https://mgmt.dfangche.com/xxfccn/image/home/webchat_app.jpg" alt />
<span>
微信扫码进入小程序购买
<br />[欣新房车助手]
</span>
</div>
<div>
<img src="https://mgmt.dfangche.com/xxfccn/image/qrcode/appQrcode.png" alt />
<span>
扫码下载app购买
<br />[滴房车](仅安卓)
</span>
</div>
<p class="annotation">注:均在会员中心进行购买</p>
</div>
</li>
<li>
<img :src="memberList[1].bigIcon" :class="{miniPic2:!grade.gold}" alt />
<p>{{memberList[1].name}}</p>
<p>{{memberList[1].price}}</p>
<p></p>
<div v-if="grade.gold == true" class="membership-rules">
<p>1.尊享欣新房车永久7折租车;</p>
<p>2.尊享欣新房车任一款房车5天(A型房车与奔驰房车除外),价值1800元;</p>
<p>3.尊享欣新房车举办的各种沙龙讲座以及户外活动</p>
<button @click="PurchaseBtn1">购买会员 ></button>
</div>
<div v-else class="purchase">
<div>
<img src="https://mgmt.dfangche.com/xxfccn/image/home/webchat_app.jpg" alt />
<span>
微信扫码进入小程序购买
<br />[欣新房车助手]
</span>
</div>
<div>
<img src="https://mgmt.dfangche.com/xxfccn/image/qrcode/appQrcode.png" alt />
<span>
扫码下载app购买
<br />[滴房车](仅安卓)
</span>
</div>
<p class="annotation">注:均在会员中心进行购买</p>
</div>
</li>
<li>
<img :src="memberList[2].bigIcon" :class="{miniPic3:!grade.diamond}" alt />
<p>{{memberList[2].name}}</p>
<p>{{memberList[2].price}}</p>
<p></p>
<div v-if="grade.diamond == true" class="membership-rules">
<p>1.尊享欣新房车永久7折租车;</p>
<p>2.尊享欣新房车任一款房车5天(A型房车与奔驰房车除外),价值1800元;</p>
<p>3.尊享欣新房车举办的各种沙龙讲座以及户外活动</p>
<button @click="PurchaseBtn2">购买会员 ></button>
</div>
<div v-else class="purchase">
<div>
<img src="https://mgmt.dfangche.com/xxfccn/image/home/webchat_app.jpg" alt />
<span>
微信扫码进入小程序购买
<br />[欣新房车助手]
</span>
</div>
<div>
<img src="https://mgmt.dfangche.com/xxfccn/image/qrcode/appQrcode.png" alt />
<span>
扫码下载app购买
<br />[滴房车](仅安卓)
</span>
</div>
<p class="annotation">注:均在会员中心进行购买</p>
</div>
</li>
</ul>
</div>
</div>
<div class="embellish-1"></div>
<div class="embellish-2"></div>
<div class="embellish-3"></div>
</div>
<!-- 最新活动●从这里启程 -->
<div class="flex-fdc-jcc activity-container" style="padding: 30px 0;">
<div class="tc title" style="color: #000;">
最新活动
<span style="font-size: 16px;margin: 0 5px;">●</span> 从这里启程
</div>
<div class="flex-aic-jcb more-container">
<div style="width: 1070px;text-align: center">
<div class="line-title"></div>
</div>
<nuxt-link to="/activity">
<div>
MORE
<img src="https://mgmt.dfangche.com/xxfccn/image/home/more.png" />
</div>
</nuxt-link>
</div>
<div class="swiper-containerActivity">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item,index) in activityList" :key="index">
<div class="left">
<img :src="item[0].banner" :alt="item[0].title" />
<nuxt-link :to="'activityList/'+item[0].id">
<h3>{{item[0].title}}</h3>
</nuxt-link>
<p>活动时间:{{item[0].startTime}} - {{item[0].endTime}}</p>
<p>活动地点:{{item[0].province}}{{item[0].city}}{{item[0].town}}{{item[0].address}}</p>
</div>
<div v-for="(val,key) in item.slice(1)" :key="key">
<ul class="right">
<li>
<nuxt-link :to="'activityList/'+val.id">
<h3>{{val.title}}</h3>
</nuxt-link>
<p>活动时间:{{val.startTime}} - {{val.endTime}}</p>
<p>活动地点:{{val.province}}{{val.city}}{{val.town}}{{val.address}}</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="swiper-button-prev swiper-button-black" style="margin: 90px 0 0 326px;">
<img
style="width: 20px;height: 20px;"
src="https://mgmt.dfangche.com/xxfccn/image/home/pre.png"
/>
</div>
<div class="swiper-button-next swiper-button-black" style="margin: 90px 326px 0 0;">
<img
style="width: 20px;height: 20px;"
src="https://mgmt.dfangche.com/xxfccn/image/home/next.png"
/>
</div>
</div>
<!-- 热门房车 -->
<!-- <div
class="flex-fdc-jcc vehicle-container vehicle-bg"
style="padding: 30px 0 155px 0;background-position: bottom;"
>
<div class="tc title">
热门房车
<span style="font-size: 16px;margin: 0 5px;">●</span> 多款房车任你选择
</div>
<div class="flex-aic-jcb more-container">
<div style="width: 1160px;text-align: center">
<div class="line-title"></div>
</div>
<nuxt-link to="/vehicle">
<div>
MORE
<img src="https://mgmt.dfangche.com/xxfccn/image/home/more.png" />
</div>
</nuxt-link>
</div>
<div class="min-win">
<ul class="v-type-ul">
<li class="v-type" :class="tabIndex== 0?'v-type-active':''" @click="changeVehicle(0)">上汽大通</li>
<li class="v-type" :class="tabIndex== 1?'v-type-active':''" @click="changeVehicle(1)">格林卡诺C2</li>
<li class="v-type" :class="tabIndex== 2?'v-type-active':''" @click="changeVehicle(2)">齐星依维柯</li>
<li class="v-type" :class="tabIndex== 3?'v-type-active':''" @click="changeVehicle(3)">奔驰斯宾特</li>
</ul>
<div class="banner-vehicle">
<div class="gallery-top-box">
<div class="swiper-container gallery-top swiper-container-top" ref="mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="item in vehicleList0" :key="item.id">
<img :src="item.url" />
</div>
</div>
<div class="swiper-button-next swiper-button-black">
<img
style="width: 20px;height: 20px;"
src="https://mgmt.dfangche.com/xxfccn/image/home/next.png"
/>
</div>
<div class="swiper-button-prev swiper-button-black">
<img
style="width: 20px;height: 20px;"
src="https://mgmt.dfangche.com/xxfccn/image/home/pre.png"
/>
</div>
</div>
<div class="gallery-thumbs-box">
<div class="swiper-container gallery-thumbs">
<div class="swiper-wrapper swiper-wrapper-thu flex-aic-jcb">
<div
class="swiper-slide"
v-for="(item,index) in vehicleList0"
:key="item.id"
@click="changeImgIndex(index)"
>
<img :src="item.url" :class="preIndex==index?'active':''" alt />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>-->
<!-- 新闻动态 -->
<div class="flex-fdc-jcc" style="background: #fff;padding: 30px 0;">
<div class="tc title">
新闻动态
<span style="font-size: 16px;margin: 0 5px;">●</span> 最新资讯与你分享
</div>
<div class="flex-aic-jcb more-container">
<div style="width: 1029px;text-align: center">
<div class="line-title"></div>
</div>
<nuxt-link to="/news">
<div>
MORE
<img src="https://mgmt.dfangche.com/xxfccn/image/home/more.png" />
</div>
</nuxt-link>
</div>
<div class="flex-aic-jcb-warp min-win" style="width:1120px">
<div class="left">
<h3>
<nuxt-link :to="'newsList/'+newsList[0].id">{{newsList[0].title}}</nuxt-link>
</h3>
<p>{{newsList[0].epitome}}</p>
<img :src="newsList[0].coverImage" alt />
</div>
<ul class="right">
<li v-for="(item,index) in newsList.slice(1)" :key="index">
<nuxt-link :to="'newsList/'+item.id">
<span>{{item.title}}</span>
<span>{{item.addTime.substring(0,10)}}</span>
</nuxt-link>
</li>
</ul>
<!-- <div class="item-c flex-aic" v-for="item in newsList" :key="item.id">
<nuxt-link :to="'/newsList/'+item.id" class="flex-aic">
<img :src="item.coverImage" class="item-c-img" :alt="item.title" />
<div class="item-c-r">
<div class="ellipsis new-tt">{{item.title}}</div>
<div class="desc ellipsis2">{{item.epitome}}</div>
<div class="time">{{item.addTime.substring(0,10)}}</div>
</div>
</nuxt-link>
</div>-->
</div>
</div>
<!-- 城市覆盖区域 -->
<div class="map-container" style="margin-top:80px">
<img style="width: 100%;" src="https://mgmt.dfangche.com/xxfccn/image/home/scope-bg.jpg" />
<div class="city-covers">
<div class="introduce">
<h3>欣新房车是一家专业从事房车销售,房车租赁,房车旅游路线策划,房车托管及房车产业配套与服务一体化的企业.</h3>
<p>将以全新的商业模式与经营理念,让房车生活走向大众.我们将竭诚为消费者提供舒适,便捷,轻松,快乐的房车生活.</p>
<p>欣新房车全国覆盖</p>
<ul>
<li>
<p>{{cityNum}}+</p>
<p>城市</p>
</li>
<li>
<p>{{comppanyNum}}+</p>
<p>分公司</p>
</li>
</ul>
<span class="look-info">
<nuxt-link to="company" style="color:#fff">
查看详情
<i class="iconfont iconsingle_arrow" style="position: relative;left: 5px;top: 2px;"></i>
</nuxt-link>
</span>
</div>
<img src="https://mgmt.dfangche.com/xxfccn/image/home/map.png" style="width:659px;float:right" alt />
</div>
</div>
<!-- 房车营地,欣新房车集团 -->
<div class="campsite" style="margin:80px auto">
<div class="left">
<div class="left-title">
<span>房车营地</span>
<nuxt-link to="campsite?types=" style="float:right;color:#fff">
<span>
MORE
<i class="iconfont iconsingle_arrow"></i>
</span>
</nuxt-link>
</div>
<img src="https://mgmt.dfangche.com/xxfccn/image/home/yindi.png" alt />
<ul>
<li v-for="(item,index) in campsiteList" :key="index">
<nuxt-link :to="'campsiteDetails/'+item.id">{{item.name}}</nuxt-link>
</li>
</ul>
</div>
<div class="right">
<div class="left-title">
<span>欣新房车集团</span>
<nuxt-link to="company" style="float:right;color:#fff">
<span>
MORE
<i class="iconfont iconsingle_arrow"></i>
</span>
</nuxt-link>
</div>
<div style="padding:15px">
<!-- <img src="./../assets/images/headquarters.png" alt /> -->
<img :src="companyList[0].cover" alt style="width:336px;height:124px"/>
<div class="adress">
<p><nuxt-link to='company'>{{companyList[0].name}}</nuxt-link></p>
<p>
<span class="iconfont iconyidongduanicon-"></span>
{{companyList[0].leaderContactInfo}}
</p>
<p>
<span class="iconfont iconditu"></span>
{{companyList[0].address}}
</p>
</div>
<ul class="company-address">
<li v-for="(item,index) in companyList.slice(1)" :key="index">
<nuxt-link to='company'>
<span>{{item.name}}</span>
<span class="iconfont iconyidongduanicon-"></span>
{{item.leaderContactInfo}}
<span class="iconfont iconsingle_arrow"></span>
</nuxt-link>
</li>
</ul>
</div>
</div>
</div>
</div>
<go-top></go-top>
<footer-modal></footer-modal>
</div>
</template> </template>
<script> <script>
import axios from '../plugins/axios' import axios from '../plugins/axios'
import banner from "../components/banner" import banner from '../components/banner'
import bannerActivity from "../components/bannerActivity" import bannerActivity from '../components/bannerActivity'
import menuModal from "../components/menu" import menuModal from '../components/menu'
import footerModal from "../components/footer" import footerModal from '../components/footer'
import Swiper from 'swiper'; import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'; import 'swiper/dist/css/swiper.min.css'
import GoTop from "../components/goTop"; import GoTop from '../components/goTop'
// import '../assets/index.css'
export default {
transition: 'bounce',
components: {
menuModal,
footerModal,
banner,
bannerActivity,
GoTop
},
data() {
return {
grade: {
common: true,
gold: true,
diamond: true
},
vehicleList0: [
{
id: 0,
url:
'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/17.jpg'
},
{
id: 0,
url:
'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/9.jpg'
},
{
id: 0,
url:
'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/15.jpg'
},
{
id: 0,
url:
'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/5.jpg'
}
],
hotActiveTitle: '0',
isTourActive: '1',
isTourActives: 'first',
isActive: '川藏游',
items: [],
curId: 0,
items1: {},
curId1: 0,
looptime: 4000, // 循环时间
width: 400,
height: 200,
background: 'red',
color: '#fff',
fontSize: '70px',
cityNum: 0, //分公司城市
comppanyNum: 0, //分公司
items2: [],
industryList: [],
hasIndustry: !1,
tabIndex: 0, //当前选中车型
preIndex: 0 //当前轮播选中图
}
},
mounted: function() {},
created() {
if (typeof window !== 'undefined') {
window.addEventListener('scroll', this.handleScroll)
}
},
async asyncData({ env }) {
function formatDate(date, fmt) {
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(
RegExp.$1,
(date.getFullYear() + '').substr(4 - RegExp.$1.length)
)
}
let o = {
'M+': date.getMonth() + 1,
'd+': date.getDate(),
'h+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds()
}
for (let k in o) {
if (new RegExp(`(${k})`).test(fmt)) {
let str = o[k] + ''
fmt = fmt.replace(
RegExp.$1,
RegExp.$1.length === 1 ? str : padLeftZero(str)
)
}
}
return fmt
}
function padLeftZero(str) {
return ('00' + str).substr(str.length)
}
function timestamp2Date(timestamp) {
let date = new Date(timestamp) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
}
function timestamp2DateNoTime(timestamp) {
let date = new Date(timestamp) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
return formatDate(date, 'yyyy-MM-dd')
}
function group(array, subGroupLength) {
let index = 0
let newArray = []
while (index < array.length) {
newArray.push(array.slice(index, (index += subGroupLength)))
}
export default { return newArray
transition: 'bounce', }
try {
// 首页活动
const { data } = await axios.get(
'/api/uccn/summitActivity/app/unauth/home?limit=10'
)
let cc = data.data
cc.map(function(item) {
item.startTime = timestamp2DateNoTime(item.startTime)
item.endTime = timestamp2DateNoTime(item.endTime)
})
group(cc, 5)
//首页banner
let tempBannerData = await axios.get(
'/api/app/banner/app/unauth/findBannerlist?type=0&platform=1'
)
let banner = tempBannerData.data.data
//首页新闻
let newsData = await axios.get(
'/api/uccn/article/app/unauth/homePage/1'
)
let news = newsData.data.data
// 首页seo
let headData = await axios.get(
'/api/uccn/seo/app/unauth/officialWebsite/1'
)
let head = headData.data.data
//热门路线
const hotCircuit = await axios.get(
'/api/uccn/app/unauth/tour/tagList'
)
//会员图标
const memberData = await axios.get(
'api/uccn/member_level/app/unauth/list'
)
let memberList = memberData.data.data
//营地
const campsiteData = await axios.get(
'api/uccn/app/unauth/campsite/shops?pageNo=1&pageSize=6'
)
let campsites = campsiteData.data.data.data
//公司地址
const companyData = await axios.post(
'api/uccn/app/unauth/branch_company/page',
{ page: 1, limit: 9 }
)
let company = companyData.data.data.data
//热门路线
let params = {}
const hotApi = await axios.post(
'/api/tour/website/app/unauth/tour',
{ type: 1, limit: 6 }
)
let hotData = hotApi.data.data
params.first = hotApi.data.data
//特色旅游
const second = await axios.post(
'/api/tour/website/app/unauth/tour',
{ type: 2, limit: 6 }
)
params.second = second.data.data
//新开辟路线
const third = await axios.get(
'/api/tour/website/app/unauth/tour/new'
)
params.third = third.data.data
components: { //推荐路线
menuModal, let fourth = await axios.get(
footerModal, '/api/uccn/app/unauth/tour/shopList?page=1&limit=6'
banner, )
bannerActivity, let tour = fourth.data.data
GoTop params.fourth = tour
}, return {
data () { hotlist: params,
return { companyList: company,
items: [], activityList: group(cc, 5),
curId: 0, bannerList: banner,
items1: {}, newsList: news,
curId1: 0, tourList: tour,
looptime: 4000, // 循环时间 headList: head,
width: 400, memberList: memberList,
height:200, campsiteList: campsites,
background: 'red', hotCircuit: hotCircuit.data.data.slice(0, 7)
color: '#fff', }
fontSize: '70px', } catch (e) {
cityNum:0,//分公司城市 console.log('interface timeout or format error =&gt; ', e)
comppanyNum: 0,//分公司 return {}
vehicleList0: [ }
{id: 1, url:'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/17.jpg', name:'上汽大通',sUrl:"https://mgmt.dfangche.com/xxfccn/image/2019-09-02/17.jpg"}, },
{id: 2, url:'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/18.jpg', name:'上汽大通',sUrl:"https://mgmt.dfangche.com/xxfccn/image/2019-09-02/18.jpg"}, methods: {
{id: 3, url:'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/19.jpg', name:'上汽大通',sUrl:"https://mgmt.dfangche.com/xxfccn/image/2019-09-02/19.jpgg"}, //购买普通会员
{id: 4, url:'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/20.jpg', name:'上汽大通',sUrl:"https://mgmt.dfangche.com/xxfccn/image/2019-09-02/20.jpg"} PurchaseBtn() {
], this.grade.common = false
items2: [], },
industryList: [], //购买黄金会员
hasIndustry: !1, PurchaseBtn1() {
tabIndex: 0,//当前选中车型 this.grade.gold = false
preIndex: 0,//当前轮播选中图 },
} //购买钻石会员
}, PurchaseBtn2() {
mounted: function () { this.grade.diamond = false
},
hotTitleClick(index) {
this.vehicleList0[0].id = index
switch (index) {
case 0:
this.vehicleList0[0].url =
'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/17.jpg'
break
case 1:
this.vehicleList0[0].url =
'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/18.jpg'
break
case 2:
this.vehicleList0[0].url =
'https://mgmt.dfangche.com/xxfccn/image/2019-09-03/5.jpg'
break
case 3:
this.vehicleList0[0].url =
'https://mgmt.dfangche.com/xxfccn/image/2019-09-03/6.jpg'
break
default:
break
}
},
hotTitleClick1(index) {
this.vehicleList0[1].id = index
switch (index) {
case 0:
this.vehicleList0[1].url =
'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/9.jpg'
break
case 1:
this.vehicleList0[1].url =
'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/10.jpg'
break
case 2:
this.vehicleList0[1].url =
'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/11.jpg'
break
case 3:
this.vehicleList0[1].url =
'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/12.jpg'
break
default:
break
}
},
hotTitleClick2(index) {
this.vehicleList0[2].id = index
switch (index) {
case 0:
this.vehicleList0[2].url =
'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/13.jpg'
break
case 1:
this.vehicleList0[2].url =
'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/14.jpg'
break
case 2:
this.vehicleList0[2].url =
'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/15.jpg'
break
case 3:
this.vehicleList0[2].url =
'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/16.jpg'
break
default:
break
}
},
hotTitleClick3(index) {
this.vehicleList0[3].id = index
switch (index) {
case 0:
this.vehicleList0[3].url =
'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/5.jpg'
break
case 1:
this.vehicleList0[3].url =
'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/6.jpg'
break
case 2:
this.vehicleList0[3].url =
'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/7.jpg'
break
case 3:
this.vehicleList0[3].url =
'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/8.jpg'
break
default:
break
}
},
chooseHot(index) {
this.tabIndex = index
},
choose(item) {
this.isTourActive = item
console.log(item)
}, switch (item) {
created(){ case 1:
if (typeof window !== 'undefined') { this.isTourActives = 'first'
window.addEventListener('scroll', this.handleScroll); break
} case 2:
}, this.isTourActives = 'second'
async asyncData({ env }) { break
function formatDate(date, fmt) { case 3:
if (/(y+)/.test(fmt)) { this.isTourActives = 'third'
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)) break
} case 4:
let o = { this.isTourActives = 'fourth'
'M+': date.getMonth() + 1, break
'd+': date.getDate(), default:
'h+': date.getHours(), break
'm+': date.getMinutes(), }
's+': date.getSeconds() // console.log(this.isTourActives);
} },
for (let k in o) { // selectStyle(item) {
if (new RegExp(`(${k})`).test(fmt)) { // this.$nextTick(function() {
let str = o[k] + '' // this.isActive = item
fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : padLeftZero(str)) // })
} // },
} handleScroll: function() {
return fmt let scrollTop =
} window.pageYOffset ||
function padLeftZero(str) { document.documentElement.scrollTop ||
return ('00' + str).substr(str.length) document.body.scrollTop
} // 设备/屏幕高度
function timestamp2Date(timestamp) { let scrollObj = document.getElementById('scroll-area') // 滚动区域
let date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000 if (scrollObj) {
return formatDate(date, 'yyyy-MM-dd hh:mm:ss'); let scrollHeight = scrollObj.scrollHeight // 滚动条的总高度
} let _t = this
function timestamp2DateNoTime(timestamp) { //滚动条到底部的条件
let date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000 if (scrollHeight - scrollTop < 1000) {
return formatDate(date, 'yyyy-MM-dd'); // _t.cityNum = 0;
} // _t.comppanyNum = 0;
try { var t = setInterval(function() {
// 首页活动 _t.cityNum = _t.cityNum + 20
const { data } = await axios.get( '/api/uccn/summitActivity/app/unauth/home?limit=3'); if (_t.cityNum >= 500) {
let cc = data.data; _t.cityNum = 500
cc.map(function(item){ clearInterval(t)
item.startTime = timestamp2DateNoTime(item.startTime); }
item.endTime = timestamp2DateNoTime(item.endTime); }, 100)
});
//首页banner
let tempBannerData = await axios.get('/api/app/banner/app/unauth/findBannerlist?type=0&platform=1');
let banner = tempBannerData.data.data;
//首页新闻
let newsData = await axios.get('/api/uccn/article/app/unauth/homePage/1');
let news = newsData.data.data;
// 首页推荐旅游
let tourData = await axios.get('/api/uccn/app/unauth/tour/shopList?page=1&limit=6');
let tour = tourData.data.data;
// 首页seo
let headData = await axios.get('/api/uccn/seo/app/unauth/officialWebsite/1');
let head = headData.data.data;
return { activityList: cc, bannerList: banner, newsList: news, tourList: tour , headList : head}
} catch (e) {
console.log('interface timeout or format error =&gt; ', e)
return {}
}
},
methods: {
handleScroll: function () {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
// 设备/屏幕高度
let scrollObj = document.getElementById("scroll-area"); // 滚动区域
if(scrollObj){
let scrollHeight = scrollObj.scrollHeight; // 滚动条的总高度
let _t = this;
//滚动条到底部的条件
if(scrollHeight-scrollTop<1000){
// _t.cityNum = 0;
// _t.comppanyNum = 0;
var t = setInterval(function(){
_t.cityNum = _t.cityNum + 20;
if( _t.cityNum>=500){
_t.cityNum = 500;
clearInterval(t);
}
},100);
let c = setInterval(function(){ let c = setInterval(function() {
_t.comppanyNum = _t.comppanyNum + 35; _t.comppanyNum = _t.comppanyNum + 35
if( _t.comppanyNum>=700){ if (_t.comppanyNum >= 700) {
_t.comppanyNum = 700; _t.comppanyNum = 700
clearInterval(c); clearInterval(c)
} }
},100); }, 100)
} else{ } else {
_t.cityNum = 0; _t.cityNum = 0
_t.comppanyNum = 0; _t.comppanyNum = 0
} }
} }
}, },
/** /**
* 车型切换 * 车型切换
*/ */
changeVehicle(index){ changeVehicle(index) {
let t = this; let t = this
this.tabIndex = index; this.tabIndex = index
if(index == 0){ if (index == 0) {
this.vehicleList0 =[ this.vehicleList0 = [
{id: 1, url:'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/17.jpg', name:'上汽大通',sUrl:"https://mgmt.dfangche.com/xxfccn/image/2019-09-02/17.jpg"}, {
{id: 2, url:'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/18.jpg', name:'上汽大通',sUrl:"https://mgmt.dfangche.com/xxfccn/image/2019-09-02/18.jpg"}, id: 1,
{id: 3, url:'https://mgmt.dfangche.com/xxfccn/image/2019-09-03/5.jpg', name:'上汽大通',sUrl:"https://mgmt.dfangche.com/xxfccn/image/2019-09-03/5.jpg"}, url:
{id: 4, url:'https://mgmt.dfangche.com/xxfccn/image/2019-09-03/6.jpg', name:'上汽大通',sUrl:"https://mgmt.dfangche.com/xxfccn/image/2019-09-03/6.jpg"} 'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/17.jpg',
]; name: '上汽大通',
} else if(index == 1){ sUrl:
this.vehicleList0 =[ 'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/17.jpg'
{id: 1, url:'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/9.jpg', name:'格林卡诺',sUrl:"https://mgmt.dfangche.com/xxfccn/image/2019-09-02/9.jpg"}, },
{id: 2, url:'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/10.jpg', name:'格林卡诺',sUrl:"https://mgmt.dfangche.com/xxfccn/image/2019-09-02/10.jpg"}, {
{id: 3, url:'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/11.jpg', name:'格林卡诺',sUrl:"https://mgmt.dfangche.com/xxfccn/image/2019-09-02/11.jpg"}, id: 2,
{id: 4, url:'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/12.jpg', name:'格林卡诺',sUrl:"https://mgmt.dfangche.com/xxfccn/image/2019-09-02/12.jpg"} url:
]; 'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/18.jpg',
} else if(index == 2){ name: '上汽大通',
this.vehicleList0 = [ sUrl:
{id: 1, url:'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/13.jpg', name:'齐星依维柯',sUrl:"https://mgmt.dfangche.com/xxfccn/image/2019-09-02/13.jpg"}, 'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/18.jpg'
{id: 2, url:'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/14.jpg', name:'齐星依维柯',sUrl:"https://mgmt.dfangche.com/xxfccn/image/2019-09-02/14.jpg"}, },
{id: 3, url:'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/15.jpg', name:'齐星依维柯',sUrl:"https://mgmt.dfangche.com/xxfccn/image/2019-09-02/15.jpg"}, {
{id:4, url:'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/16.jpg', name:'齐星依维柯',sUrl:"https://mgmt.dfangche.com/xxfccn/image/2019-09-02/16.jpg"} id: 3,
]; url:
} else if(index == 3){ 'https://mgmt.dfangche.com/xxfccn/image/2019-09-03/5.jpg',
this.vehicleList0 =[ name: '上汽大通',
{id: 1, url:'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/5.jpg', name:'奔驰斯宾特',sUrl:"https://mgmt.dfangche.com/xxfccn/image/2019-09-02/5.jpg"}, sUrl:
{id: 2, url:'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/6.jpg', name:'奔驰斯宾特',sUrl:"https://mgmt.dfangche.com/xxfccn/image/2019-09-02/6.jpg"}, 'https://mgmt.dfangche.com/xxfccn/image/2019-09-03/5.jpg'
{id: 3, url:'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/7.jpg', name:'奔驰斯宾特',sUrl:"https://mgmt.dfangche.com/xxfccn/image/2019-09-02/7.jpg"}, },
{id: 4, url:'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/8.jpg', name:'奔驰斯宾特',sUrl:"https://mgmt.dfangche.com/xxfccn/image/2019-09-02/8.jpg"} {
]; id: 4,
} url:
}, 'https://mgmt.dfangche.com/xxfccn/image/2019-09-03/6.jpg',
/** name: '上汽大通',
* 缩略图点击切换大图 sUrl:
*/ 'https://mgmt.dfangche.com/xxfccn/image/2019-09-03/6.jpg'
changeImgIndex(index){ }
this.$refs.mySwiper.swiper.slideTo(index+1, 1000, true); ]
}, } else if (index == 1) {
// 点击下一页回调 this.vehicleList0 = [
prev () { {
}, id: 1,
// 点击下一页回调 url:
next () { 'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/9.jpg',
}, name: '格林卡诺',
// 鼠标移入状态点回调 sUrl:
changeBanner () { 'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/9.jpg'
}, },
bannerClick (e) { {
debugger id: 2,
} url:
}, 'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/10.jpg',
mounted(){ name: '格林卡诺',
let t = this; sUrl:
t.changeVehicle(0); 'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/10.jpg'
this.swiperTabG = new Swiper('.gallery-thumbs', { },
spaceBetween: 10, {
slidesPerView: 4, id: 3,
freeMode: true, url:
watchSlidesVisibility: true, 'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/11.jpg',
watchSlidesProgress: true, name: '格林卡诺',
}); sUrl:
this.swiperTabT = new Swiper('.gallery-top', { 'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/11.jpg'
spaceBetween: 10, },
loop:true, {
autoplay: { id: 4,
delay: 2500, url:
disableOnInteraction: false, 'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/12.jpg',
}, name: '格林卡诺',
on: { sUrl:
slideChangeTransitionEnd: function () { 'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/12.jpg'
t.preIndex = this.activeIndex-1; }
if(t.preIndex == 4){ ]
t.$refs.mySwiper.swiper.slideTo(1, 1000, true); } else if (index == 2) {
t.preIndex = 0; this.vehicleList0 = [
} else if(t.preIndex == -1){ {
t.preIndex = 3; id: 1,
} url:
}, 'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/13.jpg',
}, name: '齐星依维柯',
navigation: { sUrl:
nextEl: '.swiper-button-next', 'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/13.jpg'
prevEl: '.swiper-button-prev', },
}, {
thumbs: { id: 2,
swiper: t.swiperTabG url:
} 'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/14.jpg',
}); name: '齐星依维柯',
}, sUrl:
head () { 'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/14.jpg'
return { },
title: this.headList.title, {
meta: [ id: 3,
{ hid: 'keywords', name: 'keywords', content: this.headList.keywords }, url:
{ hid: 'description', name: 'description', content: this.headList.description } 'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/15.jpg',
], name: '齐星依维柯',
} sUrl:
} 'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/15.jpg'
},
{
id: 4,
url:
'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/16.jpg',
name: '齐星依维柯',
sUrl:
'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/16.jpg'
}
]
} else if (index == 3) {
this.vehicleList0 = [
{
id: 1,
url:
'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/5.jpg',
name: '奔驰斯宾特',
sUrl:
'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/5.jpg'
},
{
id: 2,
url:
'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/6.jpg',
name: '奔驰斯宾特',
sUrl:
'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/6.jpg'
},
{
id: 3,
url:
'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/7.jpg',
name: '奔驰斯宾特',
sUrl:
'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/7.jpg'
},
{
id: 4,
url:
'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/8.jpg',
name: '奔驰斯宾特',
sUrl:
'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/8.jpg'
}
]
}
},
/**
* 缩略图点击切换大图
*/
changeImgIndex(index) {
this.$refs.mySwiper.swiper.slideTo(index + 1, 1000, true)
},
// 点击下一页回调
prev() {},
// 点击下一页回调
next() {},
// 鼠标移入状态点回调
changeBanner() {},
bannerClick(e) {
debugger
}
},
mounted() {
let t = this
// t.changeVehicle(0)
this.swiperTabG = new Swiper('.gallery-thumbs', {
spaceBetween: 10,
slidesPerView: 4,
freeMode: true,
watchSlidesVisibility: true,
watchSlidesProgress: true
})
this.swiperTabT = new Swiper('.gallery-top', {
spaceBetween: 10,
loop: true,
autoplay: {
delay: 2500,
disableOnInteraction: false
},
on: {
slideChangeTransitionEnd: function() {
t.preIndex = this.activeIndex - 1
if (t.preIndex == 4) {
t.$refs.mySwiper.swiper.slideTo(1, 1000, true)
t.preIndex = 0
} else if (t.preIndex == -1) {
t.preIndex = 3
}
}
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
thumbs: {
swiper: t.swiperTabG
}
})
var swipers = new Swiper('.swiper-containerActivity', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
pagination: '.swiper-pagination',
loop: true,
paginationClickable: true,
hashnav: true,
hashnavWatchState: true
})
},
head() {
return {
title: this.headList.title,
meta: [
{
hid: 'keywords',
name: 'keywords',
content: this.headList.keywords
},
{
hid: 'description',
name: 'description',
content: this.headList.description
}
]
}
}
} }
</script> </script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment