|
|
@@ -1,7 +1,77 @@
|
|
|
<template>
|
|
|
<div id="index">
|
|
|
<el-row>
|
|
|
- <el-col :span="24" class="main"> 宣传培训 </el-col>
|
|
|
+ <el-col :span="24" class="main">
|
|
|
+ <div class="w_1200">
|
|
|
+ <el-col :span="24" class="common">
|
|
|
+ <el-col :span="8" class="one">
|
|
|
+ <el-col :span="24" class="image">
|
|
|
+ <el-image :src="xspxUrl"></el-image>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="info">
|
|
|
+ <p>线上培训</p>
|
|
|
+ <p>举办地点:<span>吉林省长春市</span></p>
|
|
|
+ <p>举办时间:<span>2021-04-19 10:00:00-2021-04-19 10:00:00</span></p>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="btn">
|
|
|
+ <el-button type="primary" size="mini">进人展会</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8" class="one">
|
|
|
+ <el-col :span="24" class="image">
|
|
|
+ <el-image :src="xspxUrl"></el-image>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="info">
|
|
|
+ <p>线上新品发布</p>
|
|
|
+ <p>举办地点:<span>吉林省长春市</span></p>
|
|
|
+ <p>举办时间:<span>2021-04-19 10:00:00-2021-04-19 10:00:00</span></p>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="btn">
|
|
|
+ <el-button type="primary" size="mini">进人展会</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8" class="one">
|
|
|
+ <el-col :span="24" class="image">
|
|
|
+ <el-image :src="xspxUrl"></el-image>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="info">
|
|
|
+ <p>线上展会</p>
|
|
|
+ <p>举办地点:<span>吉林省长春市</span></p>
|
|
|
+ <p>举办时间:<span>2021-04-19 10:00:00-2021-04-19 10:00:00</span></p>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="btn">
|
|
|
+ <el-button type="primary" size="mini">进人展会</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8" class="one">
|
|
|
+ <el-col :span="24" class="image">
|
|
|
+ <el-image :src="xspxUrl"></el-image>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="info">
|
|
|
+ <p>线上科技产品宣传</p>
|
|
|
+ <p>举办地点:<span>吉林省长春市</span></p>
|
|
|
+ <p>举办时间:<span>2021-04-19 10:00:00-2021-04-19 10:00:00</span></p>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="btn">
|
|
|
+ <el-button type="primary" size="mini">进人展会</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8" class="one">
|
|
|
+ <el-col :span="24" class="image">
|
|
|
+ <el-image :src="xspxUrl"></el-image>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="info">
|
|
|
+ <p>线上科普教育</p>
|
|
|
+ <p>举办地点:<span>吉林省长春市</span></p>
|
|
|
+ <p>举办时间:<span>2021-04-19 10:00:00-2021-04-19 10:00:00</span></p>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="btn">
|
|
|
+ <el-button type="primary" size="mini">进人展会</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
</el-row>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -13,7 +83,9 @@ export default {
|
|
|
props: {},
|
|
|
components: {},
|
|
|
data: function () {
|
|
|
- return {};
|
|
|
+ return {
|
|
|
+ xspxUrl: require('@a/xspx.jpg'),
|
|
|
+ };
|
|
|
},
|
|
|
created() {},
|
|
|
methods: {},
|
|
|
@@ -33,4 +105,49 @@ export default {
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
-<style lang="less" scoped></style>
|
|
|
+<style lang="less" scoped>
|
|
|
+.main {
|
|
|
+ min-height: 500px;
|
|
|
+ margin: 10px 0 0 0;
|
|
|
+ .common {
|
|
|
+ .one {
|
|
|
+ width: 32.7%;
|
|
|
+ height: 370px;
|
|
|
+ box-shadow: 0 0 5px #ccc;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin: 0 10px 10px 0;
|
|
|
+ .image {
|
|
|
+ /deep/.el-image__inner {
|
|
|
+ width: 100%;
|
|
|
+ height: 225px;
|
|
|
+ border-top-left-radius: 5px;
|
|
|
+ border-top-right-radius: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .info {
|
|
|
+ padding: 0 10px;
|
|
|
+ p {
|
|
|
+ font-size: 14px;
|
|
|
+ margin: 0 0 8px 0;
|
|
|
+ }
|
|
|
+ p:nth-child(1) {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ word-break: break-all;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btn {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .one:nth-child(3n) {
|
|
|
+ margin: 0 0 10px 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
