1. 2 つのスワイパーが必要です。一番下のスワイパーはサムネイルです。サムネイルの上部にあるスワイパーをクリックすると、大きな画像が表示されます。サムネイルを送信するスワイパーをクリックすると、スクロール効果があり、クリックしやすくなります。 2. 「vue
」 -awesome-swiper”: “^4.1.1” “スワイパー”: “^5.4.5”
<template>
<div class="content">
<!-- 头部 -->
<headers></headers>
<!-- 轮播图 -->
<div class="swiper">
<!--<el-carousel class="swipers">
<el-carousel-item
v-for="item in bannerList"
:key="item.id"
class="swiperss"
>
<div class="swiper-item" @click="bannerClick(item)">
<el-image
style="width: 100%; height: 100%"
:src="item.imgUrl"
></el-image>
</div>
</el-carousel-item>
</el-carousel> -->
<swiper ref="mySwipers" :options="swiperOptions" class="swipers">
<swiper-slide
style="overflow: hidden"
v-for="(item, index) in bannerList"
:key="item + index"
>
<img :src="item.imgUrl" style="width: 100%; height: 100%" />
</swiper-slide>
</swiper>
<div class="swiper-pagination"></div>
</div>
<!-- 公司介绍 线下门店 线上APP -->
<div class="distrub">
<div class="bold-title">公司介绍</div>
<div class="thin-title">Company Profile</div>
<div class="square"></div>
<div class="company-detail">
<div>
{
{
companyDetail.description }}
</div>
<div>
<el-image
style="width: 100%; height: 100%"
:src="companyDetail.imgUrl"
></el-image>
</div>
</div>
<div class="more marg-sty" @click="goCompanyLink"></div>
<div class="offline-store">
<div class="bold-titles">线下门店</div>
<div class="more" @click="goStoreLink"></div>
</div>
<div class="thin-title">Offline Stores</div>
<div class="square"></div>
<div class="store-off" v-if="showSwiper">
<swiper ref="mySwiperss" :options="swiperOptionss">
<swiper-slide
class="store-offs"
style="overflow: hidden"
v-for="(item, index) in storeList"
:key="item + index"
>
<img :src="item" style="width: 100%; height: 100%" />
</swiper-slide>
</swiper>
</div>
<div class="store-off_bottom">
<swiper ref="mySwiper" :options="swiperOption" v-if="showSwiper">
<swiper-slide
style="overflow: hidden"
v-for="(item, index) in storeList"
:key="item + index"
>
<img :src="item" style="width: 100%; height: 100%" />
</swiper-slide>
</swiper>
</div>
<div class="app-sty">
<div class="app-sty_itemA">
<div class="app-sty_title">
<div class="bold-titles">线上APP</div>
<div class="more" @click="goAppLink"></div>
</div>
<div class="thin-title">Online APP</div>
<div class="square"></div>
<!-- 线上app富文本 -->
<div></div>
<div class="app-sty_introduce" v-html="appDetail.description"></div>
<div class="app-sty_applogo">
<div>
<div class="ios"></div>
<div class="upload" @click="iosUpload">iphone下载</div>
</div>
<div>
<div class="andrios" v-if="androidFlag"></div>
<div class="andrio" v-else></div>
<div class="upload" @click="andUpload" @mouseover="handMouseover" @mouseout="handMouseout">Android下载</div>
</div>
</div>
</div>
<div class="app-sty_itemB">
<div>
<div>
<el-image
:src="appImagA"
style="width: 100%; height: 100%"
></el-image>
</div>
<div>邻芝APP</div>
</div>
<div>
<el-image
:src="appImagB"
style="width: 100%; height: 100%"
></el-image>
</div>
<div>
<el-image
:src="appImagC"
style="width: 100%; height: 100%"
></el-image>
</div>
</div>
</div>
</div>
<!-- 产品中心 -->
<div class="product-center">
<div class="app-sty_title">
<div class="bold-titles">产品中心</div>
<div class="more" @click="goProductLink"></div>
</div>
<div class="thin-title">Product Center</div>
<div class="square"></div>
<div class="product-list">
<div
class="product-itemA"
v-for="(item, index) in prodcList"
:key="index"
@click.stop="clickChanpinCard(index)"
>
<el-image class="card-image" :src="item.url" fit="fill" />
<div class="card-content-box">
<span>{
{
item.name }}</span>
<div class="show-content">
<span>了解更多</span>
<el-image
class="arrow-right-img"
:src="require('@/assets/arrow_right.png')"
fit="cover"
/>
</div>
</div>
</div>
</div>
</div>
<!-- 新闻中心 -->
<div class="news">
<div class="app-sty_title">
<div class="bold-titles">新闻动态</div>
<div class="more" @click="goNewsLink"></div>
</div>
<div class="thin-title">News Information</div>
<div class="square"></div>
<div class="news-list">
<div
class="news-item"
v-for="item in newsList"
:key="item.id"
@click="goNewsDetail(item)"
>
<div>
<el-image
style="width: 100%; height: 100%"
:src="item.imgUrl"
></el-image>
</div>
<div>
<div class="news_titles">{
{
item.title }}</div>
<div class="news_content">
{
{
item.description }}
</div>
<div class="news_bottom">
<div>{
{
item.publishTime }}</div>
<div>
<div>查看详情</div>
<div>
<i class="el-icon-right"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 合作伙伴 -->
<div class="cooperative">
<div class="app-sty_title">
<div class="bold-titles">合作伙伴</div>
<div class="more" @click="goPartner"></div>
</div>
<div class="thin-title">Cooperative Partner</div>
<div class="square"></div>
<div class="cooperative-list">
<div v-for="item in cooperateList" :key="item.id">
<div class="img-stysl">
<el-image
style="width: 100%; height: 100%"
:src="item.imgUrl"
></el-image>
</div>
<div class="text-styl">{
{
item.name }}</div>
</div>
</div>
</div>
<!-- 联系我们 -->
<div class="contact">
<div class="app-sty_title">
<div class="bold-titles">联系我们</div>
<!-- <div class="more"></div> -->
</div>
<div class="thin-title">Contact Us</div>
<div class="square"></div>
<div class="contact-list">
<div class="contact-itemA">
<div>
<div class="contact-bg">
<div class="contact-title">招商加盟</div>
<div class="pad-stys">
<div class="user"></div>
<div>{
{
contactA.contact }}</div>
</div>
<div class="pad-stys">
<div class="phone"></div>
<div>{
{
contactA.phone }}</div>
</div>
<div class="pad-stys">
<div class="wechat"></div>
<div>{
{
contactA.remark }}</div>
</div>
</div>
<!-- <div class="more" @click="goContact"></div> -->
</div>
<div>
<div class="contact-bg">
<div class="contact-title">媒体咨询</div>
<div class="pad-stys">
<div class="user"></div>
<div>{
{
contactB.contact }}</div>
</div>
<div class="pad-stys">
<div class="phone"></div>
<div>{
{
contactB.phone }}</div>
</div>
<div class="pad-stys">
<div class="wechat"></div>
<div>{
{
contactB.remark }}</div>
</div>
</div>
<!-- <div class="more" @click="goContact"></div> -->
</div>
</div>
<div class="contact-itemB">
<div class="map" @click="clickMap">
<div id="map" style="width: 100%; height: 100%"></div>
</div>
<div class="address">公司地址：{
{
addressObj.address }}</div>
</div>
</div>
</div>
<!-- 产品详情 -->
<el-dialog
:visible.sync="showContentDialog"
title="curContentTitle"
center
:close-on-click-modal="true"
:destroy-on-close="true"
>
<div class="dialog-content-box">
<div v-for="(item, key) in curContent" :key="key">
<img
v-if="item.type == 'img'"
class="content-img1"
:src="item.url"
fit="cover"
/>
<h3 v-if="item.type == 'title3'" class="title3">
{
{
item.con }}
</h3>
<h1 v-if="item.type == 'title1'" class="title1">
{
{
item.con }}
</h1>
<div v-if="item.type == 'content'" class="content">
{
{
item.con }}
</div>
<div v-if="item.type == 'content1'" class="content1">
{
{
item.con }}
</div>
</div>
</div>
<template #footer>
<span class="dialog-footer">
<el-button class="close-dialog" @click="showContentDialog = false">
关闭
</el-button>
</span>
</template>
</el-dialog>
<!-- 地图大图 -->
<el-dialog
:visible.sync="showContentDialogs"
:title="curContentTitle"
center
:close-on-click-modal="true"
:destroy-on-close="true"
>
<div class="dialog-content-box">
<div id="maps" style="width: 100%; height: 100%"></div>
</div>
<template #footer>
<span class="dialog-footer">
<el-button class="close-dialog" @click="showContentDialogs = false">
关闭
</el-button>
</span>
</template>
</el-dialog>
<!-- 底部 -->
<footers></footers>
</div>
</template>
<script>
import headers from "../components/header.vue";
import footers from "../components/footer.vue";
import {
Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
import {
WOW } from "wowjs";
import AMapLoader from "@amap/amap-jsapi-loader";
import {
productList } from "../utils/product.js";
import {
getBanners,
getCompanyAndStore,
getNewsList,
getContactUs,
getCooperate,
} from "@/http/api";
window._AMapSecurityConfig = {
securityJsCode: "86206530917ec6868832af969d06bea9",
};
export default {
components: {
headers,
footers,
Swiper,
SwiperSlide,
},
data() {
let that = this;
return {
bannerList: [],
androidFlag:false,
showContentDialogs:false,
cooperateList: [],
map: null, //高德实例
marker: null, //点标记 Marker
geocoder: null,
contactB: {
},
contactA: {
},
addressObj: {
},
flag: false,
currentUrl: "",
//首页banner
swiperOptions: {
// 衔接滑动
loop: false,
// 自动滑动
autoplay: {
delay: 6000,
stopOnLastSlide: false,
disableOnInteraction: false,
},
// 切换效果 "coverflow"（3d流）
effect: "slide",
grabCursor: true,
// 设置slider容器能够同时显示的slides数量
// 居中幻灯片。设定为true时，当前的active slide 会居中，而不是默认状态下的居左。
centeredSlides: false,
// 设置为true则点击slide会过渡到这个slide。
slideToClickedSlide: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
type: "bullets",
//下面方法可以生成我们自定义的分页器到页面上
// renderCustom: function (swiper, current, total) {
// var paginationHtml = " ";
// for (var i = 0; i < total; i++) {
// // 判断是不是激活焦点，是的话添加active类，不是就只添加基本样式类
// if (i === current - 1) {
// paginationHtml += `<div class="swiper-pagination-customs swiper-pagination-customs-active"></div>`;
// } else {
// paginationHtml += `<div class="swiper-pagination-customs"></div>`;
// }
// }
// return paginationHtml;
// },
},
on: {
click: function () {
console.log(this.clickedIndex);
if (that.bannerList[this.clickedIndex].linkUrl != "") {
window.open(
that.bannerList[this.clickedIndex].linkUrl,
"_blank",
"width=900, height=700"
);
}
},
slideChangeTransitionEnd: function () {
this.slideToLoop(this.realIndex, 0, true); //防止loop:true 复制dom
},
},
},
//线下门店小图
swiperOption: {
autoplay: {
delay: 6000,
stopOnLastSlide: false,
disableOnInteraction: false,
},
loop: true,
loopedSlides: 99, // looped slides should be the same
spaceBetween: 10,
centeredSlides: true, //左边不留白
loopAdditionalSlides: 1000,
slidesPerView: 4,
slideToClickedSlide: true,
},
//线下门店大图
swiperOptionss: {
autoplay: {
delay: 6000,
stopOnLastSlide: false,
disableOnInteraction: false,
},
loop: true,
loopedSlides: 99, // looped slides should be the same
spaceBetween: 10,
},
prodcList: [],
showContentDialog: false,
curContentTitle: "",
curContent: [],
isWap: false,
dialogVisible: false,
companyDetail: {
},
// storeDetail:{},
storeList: [],
appDetail: {
},
appImagA: "",
appImagB: "",
appImagC: "",
newsList: [],
contatctObj: {
},
showSwiper: false,
// delayTime:6000,
};
},
computed: {
mySwipers() {
//bannner
// mySwiper 是要绑定到标签中的ref属性
return this.$refs.mySwipers.$swiper;
},
// mySwiper() {
// //门店小图
// // mySwiper 是要绑定到标签中的ref属性
// return this.$refs.mySwiper.$swiper;
// },
// mySwiperss() {
// //门店小图
// // mySwiper 是要绑定到标签中的ref属性
// return this.$refs.mySwiperss.$swiper;
// },
},
mounted() {
// this.$nextTick(() => {
// // 在dom渲染完后,再执行动画
// this.$wow.init();
// });
this.prodcList = productList.slice(0, 8);
console.log("xxxxx");
console.log(this.prodcList);
console.log("xxxxx");
this.getBanners();
this.getCompany();
this.getStore();
this.getApp();
this.getNewsList();
this.getContactUs();
this.getCooperates();
},
methods: {
/**安卓下载 */
andUpload() {
window.open(this.appDetail.androidApp, "_blank", "width=900, height=700");
},
/**ios下载 */
iosUpload() {
window.open(this.appDetail.iosApp, "_blank", "width=900, height=700");
},
/**点击产品显示详情 */
clickChanpinCard(item_key) {
console.log(item_key);
this.curContent = this.prodcList[item_key].content;
this.curContentTitle = this.prodcList[item_key].name;
this.showContentDialog = true;
console.log(this.showContentDialog);
this.dialogVisible = true;
},
/**点击轮播图 */
bannerClick(item) {
console.log("bbbbbbbb");
console.log(item);
if (item.linkUrl != "") {
window.open(item.linkUrl, "_blank", "width=900, height=700");
}
},
/**查询首页最上面轮播图 */
getBanners() {
console.log("xxxx");
getBanners().then((res) => {
console.log(res.data);
this.bannerList = res.data;
});
},
/** 公司介绍 */
getCompany() {
// console.log('查询参数',this.queryParams)
getCompanyAndStore("COMPANY").then((response) => {
this.companyDetail = response.data;
this.companyDetail.imgUrl = response.data.imgUrls[0];
});
},
/**跳转公司详情路由 */
goCompanyLink() {
this.$router.push({
path: "/companyProfile",
});
},
/**跳转线下门店详情路由 */
goStoreLink() {
this.$router.push({
path: "/storeIntroduction",
});
},
/**获取首页门店图片 */
getStore() {
getCompanyAndStore("STORE").then((response) => {
this.storeList = response.data.imgUrls;
this.showSwiper = true;
console.log(this.delayTime);
this.$nextTick(() => {
const mySwiper = this.$refs.mySwiper.$swiper;
const mySwiperss = this.$refs.mySwiperss.$swiper;
mySwiper.controller.control = mySwiperss;
mySwiperss.controller.control = mySwiper;
});
});
},
/**线上app详情路由 */
goAppLink() {
this.$router.push({
path: "/onlineApp",
});
},
/**获取线上app详情 */
getApp() {
getCompanyAndStore("APP").then((response) => {
this.appDetail = response.data;
this.appImagA = this.appDetail.imgUrls[0];
this.appImagB = this.appDetail.imgUrls[1];
this.appImagC = this.appDetail.imgUrls[2];
});
},
/**跳转产品详情 */
goProductLink() {
this.$router.push({
path: "/productCenter",
});
},
/**跳转新闻动态详情 */
goNewsLink() {
this.$router.push({
path: "/newsInformation",
});
},
/**新闻动态列表 */
getNewsList() {
getNewsList({
pageNum: 1,
pageSize: 2,
}).then((res) => {
this.newsList = res.rows;
});
},
/**新闻中心详情 */
goNewsDetail(item) {
this.$router.push({
path: "/newsDetail",
query: {
id: item.id,
},
});
},
/**合作伙伴 */
goPartner() {
this.$router.push({
path: "/cooperativePartner",
});
},
/**联系我们 */
goContact() {
this.$router.push({
path: "/contactUs",
});
},
/**查询联系我们 */
getContactUs() {
getContactUs({
}).then((res) => {
console.log(res);
this.contatctObj = res.data;
this.contactA = this.contatctObj.contact[1];
this.contactB = this.contatctObj.contact[0];
this.addressObj = res.data.companyAddress;
this.initMap();
});
},
/**initMap */
initMap() {
AMapLoader.load({
key: "86206530917ec6868832af969d06bea9", // 申请好的Web端开发者Key，首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: ["AMap.CitySearch", "AMap.Geocoder"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
})
.then((AMap) => {
// 实例化
this.map = new AMap.Map("map", {
//设置地图容器id
viewMode: "3D", //是否为3D地图模式
zoom: 10, //初始化地图级别
center: [this.addressObj.longitude, this.addressObj.latitude], //初始化地图中心点位置
});
// 自动获取用户IP，返回当前城市
let citysearch = new AMap.CitySearch();
citysearch.getLocalCity((status, result) => {
if (status === "complete" && result.info === "OK") {
console.log(result);
}
});
this.updateMap([this.addressObj.longitude, this.addressObj.latitude]);
// 逆向地理编码插件
this.geocoder = new AMap.Geocoder({
// city: "010", //城市设为北京，默认：“全国”
radius: 1000, //范围，默认：500
});
})
.catch((e) => {
console.log(e);
});
},
/**initMap */
initMaps() {
AMapLoader.load({
key: "86206530917ec6868832af969d06bea9", // 申请好的Web端开发者Key，首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: ["AMap.CitySearch", "AMap.Geocoder"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
})
.then((AMap) => {
// 实例化
this.map = new AMap.Map("maps", {
//设置地图容器id
viewMode: "3D", //是否为3D地图模式
zoom: 10, //初始化地图级别
center: [this.addressObj.longitude, this.addressObj.latitude], //初始化地图中心点位置
});
// 自动获取用户IP，返回当前城市
let citysearch = new AMap.CitySearch();
citysearch.getLocalCity((status, result) => {
if (status === "complete" && result.info === "OK") {
console.log(result);
}
});
this.updateMap([this.addressObj.longitude, this.addressObj.latitude]);
// 逆向地理编码插件
this.geocoder = new AMap.Geocoder({
// city: "010", //城市设为北京，默认：“全国”
radius: 1000, //范围，默认：500
});
})
.catch((e) => {
console.log(e);
});
},
updateMap(lnglat) {
// 移除已创建的 marker
if (this.marker) this.map.remove(this.marker);
// 同时设置地图中心点和缩放级别
this.map.setZoomAndCenter(16, lnglat);
// 自定义标记点
this.marker = new AMap.Marker({
position: lnglat,
// icon: "http://vdata.amap.com/icons/b18/1/2.png",
anchor: "top-center",
offset: new AMap.Pixel(-10, -10),
});
// 添加到实例
this.marker.setMap(this.map);
// 设置label标签，label默认蓝框白底左上角显示，样式className为：amap-marker-label
this.marker.setLabel({
direction: "top-center",
offset: new AMap.Pixel(10, 0), //设置文本标注偏移量
content: "", //设置文本标注内容
});
},
/**合作伙伴 */
getCooperates() {
getCooperate({
pageNum: 1,
pageSize: 4,
}).then((res) => {
this.cooperateList = res.rows;
});
},
/**点击了地图 */
clickMap(){
this.showContentDialogs = true;
setTimeout(() => {
this.initMaps();
}, 100);
},
/**鼠标移入 */
handMouseover(){
this.androidFlag = true;
},
/**鼠标移出 */
handMouseout(){
this.androidFlag = false;
}
},
};
</script>
<style lang="less" scoped>
.content {
height: 100%;
.swiper {
width: 100%;
height: 670px;
padding-top: 110px;
position: relative;
// box-sizing: border-box;
.swipers {
height: 670px;
width: 100%;
box-sizing: border-box;
overflow: hidden;
}
.swiperss {
height: 670px;
}
.swiper-item {
height: 670px;
width: 100%;
background: #eeeeee;
}
.el-carousel {
width: 100%;
/deep/ .el-carousel__button {
// 指示器按钮
width: 15px;
height: 15px;
border-radius: 50%;
opacity: 1;
border: none;
background-color: rgb(255, 255, 255);
}
/deep/ .is-active .el-carousel__button {
// 指示器激活按钮
background: #6cb596;
border-radius: 7px;
width: 33px;
height: 14px;
}
}
}
}
.distrub {
padding: 116px 360px 39px 361px;
.bold-title {
height: 34px;
font-size: 34px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #626262;
}
.thin-title {
height: 11px;
font-size: 12px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #626262;
margin-top: 19px;
}
.square {
width: 43px;
height: 4px;
background: #04cba3;
margin-top: 40px;
}
.company-detail {
display: flex;
justify-content: space-between;
margin-top: 22px;
> div {
&:nth-child(1) {
width: 669px;
// height: 227px;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #7c7c7c;
line-height: 30px;
}
&:nth-child(2) {
width: 467px;
height: 226px;
}
}
.marg-sty {
margin-top: 17px;
}
}
.more {
width: 180px;
height: 41px;
background: url("../assets/more.png");
background-size: 100% 100%;
cursor: pointer;
}
.offline-store {
display: flex;
margin-top: 116px;
align-items: center;
> div {
&:nth-child(1) {
margin-right: 115px;
font-size: 34px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #626262;
}
}
}
.store-off {
width: 100%;
height: 360px;
margin-top: 42px;
.store-offs {
width: 100%;
height: 360px;
}
}
.store-off_bottom {
width: 100%;
height: 136px;
margin-top: 22px;
> div {
&:nth-child(1) {
width: 100%;
height: 100%;
display: flex;
}
}
.storet-off-item {
width: 272px;
height: 100%;
flex-shrink: 0;
margin-right: 16px;
border: 1px solid blue;
}
}
.app-sty {
width: 100%;
margin-top: 147px;
padding-right: 42px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
.app-sty_itemA {
box-sizing: border-box;
padding-top: 36px;
.app-sty_title {
display: flex;
> div {
&:nth-child(1) {
margin-right: 120px;
font-size: 34px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #626262;
}
}
}
.app-sty_introduce {
width: 589px;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #7c7c7c;
line-height: 30px;
margin-top: 42px;
}
.app-sty_applogo {
width: 589px;
margin-top: 56px;
display: flex;
justify-content: space-around;
> div {
display: flex;
flex-direction: column;
align-items: center;
&:nth-child(2) {
padding-top: 15px;
}
}
.ios {
width: 72px;
height: 83px;
background: url("../assets/ios.png");
background-size: 100% 100%;
margin-bottom: 32px;
}
.andrio {
width: 86px;
height: 53px;
background: url("../assets/android.png");
background-size: 100% 100%;
margin-bottom: 47px;
}
.andrios {
width: 83px;
height: 83px;
background: url("../assets/app-erwei.jpg");
background-size: 100% 100%;
margin-bottom: 18px;
}
.upload {
width: 181px;
height: 43px;
border: 2px solid #04cba3;
border-radius: 30px;
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #04cba3;
text-align: center;
line-height: 43px;
cursor: pointer;
}
}
}
.app-sty_itemB {
height: 493px;
position: relative;
> div {
&:nth-child(3) {
width: 243px;
height: 493px;
position: absolute;
top: 0;
right: 0;
}
&:nth-child(2) {
width: 88px;
height: 44px;
position: absolute;
top: 75px;
right: 240px;
}
&:nth-child(1) {
position: absolute;
top: 93px;
right: 333px;
> div {
display: flex;
flex-direction: column;
align-items: center;
&:nth-child(1) {
width: 70px;
height: 70px;
}
&:nth-child(2) {
font-size: 15px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #000000;
margin-top: 13px;
white-space: nowrap;
}
}
}
}
}
}
}
.product-center {
width: 100%;
background: #f8f8f8;
padding: 57px 360px 0px 361px;
box-sizing: border-box;
.app-sty_title {
display: flex;
> div {
&:nth-child(1) {
margin-right: 120px;
font-size: 34px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #626262;
}
}
}
.more {
width: 180px;
height: 41px;
background: url("../assets/more.png");
background-size: 100% 100%;
cursor: pointer;
}
.thin-title {
height: 11px;
font-size: 12px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #626262;
margin-top: 19px;
}
.square {
width: 43px;
height: 4px;
background: #04cba3;
margin-top: 40px;
}
.product-list {
margin-top: 43px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
> div {
width: 282px;
height: 394px;
}
.el-image /deep/ img {
transition: all 0.5s;
}
.el-image /deep/ img:hover {
transform: scale(1.05);
}
.product-itemA {
margin-bottom: 60px;
.card-content-box {
display: flex;
flex-direction: column;
text-align: left;
padding: 15px;
}
.card-content-box span {
font-size: 18px;
color: #3b496a;
font-weight: 600;
}
.show-content {
display: flex;
justify-content: left;
align-items: center;
padding: 20px 0;
cursor: pointer;
}
.show-content span {
font-size: 15px;
color: #04cba3;
font-weight: 400;
}
.arrow-right-img {
width: 12px;
height: 13px;
margin-left: 8px;
}
}
}
}
.news {
width: 100%;
box-sizing: border-box;
padding: 57px 364px 19px 360px;
.app-sty_title {
display: flex;
> div {
&:nth-child(1) {
margin-right: 120px;
font-size: 34px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #626262;
}
}
}
.more {
width: 180px;
height: 41px;
background: url("../assets/more.png");
background-size: 100% 100%;
cursor: pointer;
}
.thin-title {
height: 11px;
font-size: 12px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #626262;
margin-top: 19px;
}
.square {
width: 43px;
height: 4px;
background: #04cba3;
margin-top: 40px;
}
.news-list {
margin-top: 42px;
.news-item {
display: flex;
margin-bottom: 41px;
> div {
&:nth-child(1) {
width: 250px;
height: 140px;
margin-right: 77px;
}
&:nth-child(2) {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
}
.news_titles {
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #333333;
}
.news_content {
font-family: Microsoft YaHei;
font-weight: 400;
color: #7c7c7c;
width: 100%;
line-height: 22px;
display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
text-overflow: ellipsis;
-webkit-box-orient: vertical; /**设置或检索伸缩盒对象的子元素的排列方式 **/
-webkit-line-clamp: 3; /** 显示的行数 **/
overflow: hidden; /** 隐藏超出的内容 **/
/* autoprefixer: ignore next */
-webkit-box-orient: vertical;
}
.news_bottom {
display: flex;
justify-content: space-between;
align-items: center;
> div {
&:nth-child(1) {
font-size: 13px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #f37b1d;
}
&:nth-child(2) {
display: flex;
align-items: center;
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #666666;
cursor: pointer;
> div {
&:nth-child(1) {
margin-right: 15px;
}
}
}
}
}
}
}
}
.cooperative {
width: 100%;
box-sizing: border-box;
padding: 57px 360px 58px 360px;
background: #f8f8f8;
.app-sty_title {
display: flex;
> div {
&:nth-child(1) {
margin-right: 120px;
font-size: 34px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #626262;
}
}
}
.more {
width: 180px;
height: 41px;
background: url("../assets/more.png");
background-size: 100% 100%;
cursor: pointer;
}
.thin-title {
height: 11px;
font-size: 12px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #626262;
margin-top: 19px;
}
.square {
width: 43px;
height: 4px;
background: #04cba3;
margin-top: 40px;
}
.cooperative-list {
width: 100%;
display: flex;
margin-top: 54px;
justify-content: flex-start;
flex-wrap: wrap;
> div {
width: 25%;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 30px;
padding-right: 20px;
.el-image /deep/ img {
transition: all 0.5s;
}
.el-image /deep/ img:hover {
transform: scale(1.05);
}
.img-stysl {
width: 100%;
height: 221px;
border-radius: 10px;
overflow: hidden;
}
.text-styl {
font-size: 21px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #333333;
line-height: 52px;
}
}
}
}
.contact {
width: 100%;
box-sizing: border-box;
padding: 57px 360px 68px 360px;
.app-sty_title {
display: flex;
> div {
&:nth-child(1) {
margin-right: 120px;
font-size: 34px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #626262;
}
}
}
.more {
width: 180px;
height: 41px;
background: url("../assets/more.png");
background-size: 100% 100%;
cursor: pointer;
}
.thin-title {
height: 11px;
font-size: 12px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #626262;
margin-top: 19px;
}
.square {
width: 43px;
height: 4px;
background: #04cba3;
margin-top: 40px;
}
.contact-list {
display: flex;
justify-content: space-between;
margin-top: 42px;
.contact-itemA {
display: flex;
> div {
display: flex;
flex-direction: column;
width: 260px;
align-items: center;
height: 100%;
&:nth-child(1) {
margin-right: 26px;
}
}
.contact-bg {
width: 260px;
height: 222px;
background: #d8dde5;
margin-bottom: 24px;
display: flex;
flex-direction: column;
padding: 26px 0 31px;
box-sizing: border-box;
justify-content: space-between;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #000000;
border-radius: 10px;
overflow: hidden;
> div {
display: flex;
align-items: center;
&:nth-child(1) {
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #333333;
text-align: center;
}
}
.contact-title {
justify-content: center;
}
.user {
width: 26px;
height: 26px;
background: url("../assets/ren.png");
background-size: 100% 100%;
margin-right: 27px;
}
.phone {
width: 23px;
height: 23px;
background: url("../assets/renphone.png");
background-size: 100% 100%;
margin-right: 27px;
}
.wechat {
width: 26px;
height: 22px;
background: url("../assets/renchat.png");
background-size: 100% 100%;
margin-right: 27px;
}
.pad-stys {
padding-left: 51px;
}
}
}
.contact-itemB {
.map {
width: 480px;
height: 222px;
border-radius: 10px;
overflow: hidden;
}
.address {
width: 466px;
height: 42px;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #000000;
// line-height: 25px;
margin-top: 24px;
}
}
}
}
.dialog-content-box {
height: 600px;
overflow-y: scroll;
overflow-x: hidden;
.content-img1 {
width: 100%;
margin: 16px 0;
}
.title1 {
margin: 16px 0;
}
.title3 {
margin: 16px 0;
}
.content {
font-size: 16px;
margin: 16px 0;
line-height: 16px;
}
.content1 {
font-size: 16px;
margin: 16px 0;
line-height: 16px;
font-weight: bold;
}
}
.dialog-content-box::-webkit-scrollbar {
/*滚动条整体样式*/
width: 5px;
height: 3px;
}
.dialog-content-box::-webkit-scrollbar-thumb {
/*滚动条里面小方块样式*/
border-radius: 100px;
-webkit-box-shadow: inset 0 0 5px rgba(151, 151, 151, 0.2);
background: rgba(0, 0, 0, 0.1);
}
.dialog-content-box::-webkit-scrollbar-track {
/*滚动条里面轨道样式*/
-webkit-box-shadow: inset 0 0 5px rgba(223, 223, 223, 0.2);
border-radius: 100px;
background: rgba(0, 0, 0, 0.1);
}
.close-dialog {
background-color: #04cba3;
color: #ffffff;
font-size: 15px;
font-weight: 500;
width: 120px;
height: 40px;
border-radius: 0;
border: none;
}
// @media screen and (max-width: 640px) {
// body {
// font-size: 124px !important;
// font-weight: bold;
// background: red;
// }
// }
.swiper-pagination {
width: 70%;
height: 94px;
background: transparent;
position: absolute;
bottom: 0px;
z-index: 1000;
left: 50%;
transform: translateX(-50%);
}
/*自定义分页器的样式*/
.swiper-pagination /deep/ .swiper-pagination-bullet {
width: 15px;
height: 15px;
border-radius: 100%;
display: inline-block;
margin: 0 3px;
outline: 0;
background: #ffffff;
background-size: 100% 100%;
box-sizing: border-box;
opacity: 1;
}
.swiper-pagination /deep/ .swiper-pagination-bullet-active {
width: 33px;
height: 14px;
background: #6cb596;
border-radius: 7px;
}
@media screen and (max-width: 800px) {
.distrub {
padding: 50px 50px;
.company-detail {
display: flex;
flex-direction: column;
align-items: center;
> div {
width: 100% !important;
font-size: 16px !important;
line-height: 50px !important;
&:nth-child(2) {
margin-top: 50px;
width: 100% !important;
height: 791px !important;
margin-bottom: 50px;
}
}
}
.more {
margin-top: 0px !important;
}
.app-sty {
display: flex;
flex-direction: column;
align-items: center;
.app-sty_itemA {
width: 100% !important;
font-size: 16px !important;
line-height: 50px !important;
.app-sty_introduce {
width: 100% !important;
font-size: 16px !important;
line-height: 50px !important;
}
.app-sty_applogo {
display: flex;
justify-content: space-around;
width: 100%;
.upload{
width: 281px;
}
}
}
.app-sty_itemB {
width: 25%;
display: flex;
justify-content: center;
}
}
}
.product-center {
padding: 50px 50px;
.product-list {
justify-content: flex-start;
.product-itemA {
height: 100%;
width: 25%;
box-sizing: border-box;
padding: 0px 20px;
}
}
}
.news {
padding: 50px 50px;
.news_content {
font-size: 16px;
display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
text-overflow: ellipsis;
-webkit-box-orient: vertical; /**设置或检索伸缩盒对象的子元素的排列方式 **/
-webkit-line-clamp: 1; /** 显示的行数 **/
overflow: hidden; /** 隐藏超出的内容 **/
/* autoprefixer: ignore next */
-webkit-box-orient: vertical;
line-height: 50px !important;
}
}
.cooperative {
padding: 50px 50px;
}
.contact {
padding: 50px 50px;
height: 100%;
.contact-list {
height: 100%;
display: flex;
flex-direction: column;
.contact-itemA {
width: 100%;
display: flex;
justify-content: space-around;
> div {
width: 50%;
}
.contact-bg {
width: 50%;
height: 250px;
padding-bottom: 20px;
}
}
.contact-itemB {
width: 100%;
margin-top: 20px;
display: flex;
justify-content: space-around;
align-items: center;
}
}
}
}
/*解决swiper闪现白色的问题*/
.swiper-container {
transform: translate3d(0, 0, 0);
}
.swiper-slide {
transform: translate3d(0, 0, 0);
}
</style>
