|
|
@@ -1,28 +1,119 @@
|
|
|
<template>
|
|
|
<div id="index">
|
|
|
<el-row>
|
|
|
- <el-col :span="24" class="main animate__animated animate__zoomInDown"> 解决方案 </el-col>
|
|
|
+ <el-col :span="24" class="main animate__animated animate__zoomInDown">
|
|
|
+ <el-col :span="24" class="zero one">
|
|
|
+ <el-col :span="16" class="one_1">
|
|
|
+ <el-carousel height="500px">
|
|
|
+ <el-carousel-item v-for="(item, index) in bannerList" :key="index">
|
|
|
+ <el-image class="image" :src="item.url"></el-image>
|
|
|
+ </el-carousel-item>
|
|
|
+ </el-carousel>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8" class="one_2">
|
|
|
+ <el-col :span="24" class="newsList" v-for="(item, index) in newsList" :key="index">
|
|
|
+ <el-col :span="24" class="title textOver">{{ item.title }}</el-col>
|
|
|
+ <el-col :span="24" class="date">{{ item.date }}</el-col>
|
|
|
+ <el-col :span="24" class="brief">{{ item.brief }}</el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="zero two">
|
|
|
+ <el-col :span="24" class="common_1">
|
|
|
+ <span>解决方案</span>
|
|
|
+ <span></span>
|
|
|
+ <span></span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="two_1">
|
|
|
+ <div id="container"></div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="two_2">
|
|
|
+ <el-col :span="24" class="two_2_1"> 发表您的留言： </el-col>
|
|
|
+ <el-col :span="24" class="two_2_2">
|
|
|
+ <data-form :fields="fields" :form="form" :rules="rules" @save="toSave"> </data-form>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
</el-row>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import AMapLoader from '@amap/amap-jsapi-loader';
|
|
|
import { mapState, createNamespacedHelpers } from 'vuex';
|
|
|
export default {
|
|
|
name: 'index',
|
|
|
props: {},
|
|
|
components: {},
|
|
|
data: function () {
|
|
|
- return {};
|
|
|
+ return {
|
|
|
+ // 轮播图
|
|
|
+ bannerList: [{ url: require('@a/contact_1.jpg') }],
|
|
|
+ // 新闻
|
|
|
+ newsList: [
|
|
|
+ {
|
|
|
+ title: 'Android端Cortana更新控制通知设置',
|
|
|
+ date: '2023-02-02',
|
|
|
+ brief: '跨境购商城是指能够在线开展跨境电子商务交易的商城，和普通商城的区别在于，它可以直接连入中国电子口岸通关服务系统，',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: 'Android端Cortana更新控制通知设置',
|
|
|
+ date: '2023-02-02',
|
|
|
+ brief: '跨境购商城是指能够在线开展跨境电子商务交易的商城，和普通商城的区别在于，它可以直接连入中国电子口岸通关服务系统，',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: 'Android端Cortana更新控制通知设置',
|
|
|
+ date: '2023-02-02',
|
|
|
+ brief: '跨境购商城是指能够在线开展跨境电子商务交易的商城，和普通商城的区别在于，它可以直接连入中国电子口岸通关服务系统，',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: 'Android端Cortana更新控制通知设置',
|
|
|
+ date: '2023-02-02',
|
|
|
+ brief: '跨境购商城是指能够在线开展跨境电子商务交易的商城，和普通商城的区别在于，它可以直接连入中国电子口岸通关服务系统，',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ map: null,
|
|
|
+ form: {},
|
|
|
+ rules: {
|
|
|
+ name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
|
|
|
+ phone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
|
|
|
+ email: [{ required: true, message: '请输入电子邮箱', trigger: 'blur' }],
|
|
|
+ content: [{ required: true, message: '请输入留言内容', trigger: 'blur' }],
|
|
|
+ },
|
|
|
+ fields: [
|
|
|
+ { label: '姓名', model: 'name' },
|
|
|
+ { label: '联系电话', model: 'phone' },
|
|
|
+ { label: '电子邮箱', model: 'email' },
|
|
|
+ { label: '留言内容', model: 'content', type: 'textarea' },
|
|
|
+ ],
|
|
|
+ };
|
|
|
},
|
|
|
created() {},
|
|
|
- methods: {},
|
|
|
+ methods: {
|
|
|
+ // 保存
|
|
|
+ toSave({ data }) {
|
|
|
+ console.log(data);
|
|
|
+ },
|
|
|
+ },
|
|
|
computed: {
|
|
|
...mapState(['user']),
|
|
|
},
|
|
|
metaInfo() {
|
|
|
return { title: this.$route.meta.title };
|
|
|
},
|
|
|
+ mounted() {
|
|
|
+ AMapLoader.load({
|
|
|
+ key: 'fddcef56a6deeb3c9e06989b80f99526',
|
|
|
+ version: '',
|
|
|
+ plugins: [''],
|
|
|
+ })
|
|
|
+ .then((AMap) => {
|
|
|
+ map = new AMap.Map('container', { zoom: 12 });
|
|
|
+ })
|
|
|
+ .catch((e) => {});
|
|
|
+ },
|
|
|
+
|
|
|
watch: {
|
|
|
test: {
|
|
|
deep: true,
|
|
|
@@ -33,4 +124,95 @@ export default {
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
-<style lang="less" scoped></style>
|
|
|
+<style lang="less" scoped>
|
|
|
+#container {
|
|
|
+ width: 100%;
|
|
|
+ height: 500px;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+.main {
|
|
|
+ .zero {
|
|
|
+ margin: 0 0 2vw 0;
|
|
|
+ .common_1 {
|
|
|
+ margin: 0 0 20px 0;
|
|
|
+ span:nth-child(1) {
|
|
|
+ color: #ffc001;
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+ span:nth-child(2) {
|
|
|
+ display: inline-block;
|
|
|
+ width: 8px;
|
|
|
+ height: 10px;
|
|
|
+ background-color: #ffc001;
|
|
|
+ margin: 0 10px;
|
|
|
+ }
|
|
|
+ span:nth-child(3) {
|
|
|
+ display: inline-block;
|
|
|
+ width: 91%;
|
|
|
+ height: 10px;
|
|
|
+ background-color: #f1f1f1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .one {
|
|
|
+ .one_1 {
|
|
|
+ .image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .one_2 {
|
|
|
+ padding: 0 10px;
|
|
|
+ .newsList {
|
|
|
+ margin: 0 0 20px 0;
|
|
|
+ padding: 0 0 20px 0;
|
|
|
+ border-bottom: 1px dashed #353535;
|
|
|
+ .title {
|
|
|
+ font-size: 20px;
|
|
|
+ margin: 0 0 5px 0;
|
|
|
+ font-weight: bold;
|
|
|
+ font-family: cursive;
|
|
|
+ }
|
|
|
+ .date {
|
|
|
+ font-size: 14px;
|
|
|
+ margin: 0 0 5px 0;
|
|
|
+ }
|
|
|
+ .brief {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #7e7e7e;
|
|
|
+ line-height: 1.5;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ word-break: break-all;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .newsList:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ .newsList:hover {
|
|
|
+ cursor: pointer;
|
|
|
+ .title {
|
|
|
+ color: #ffc001;
|
|
|
+ }
|
|
|
+ .date {
|
|
|
+ color: #ffc001;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .two {
|
|
|
+ .two_2 {
|
|
|
+ .two_2_1 {
|
|
|
+ margin: 20px 0;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #7e7e7e;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
