更新

src/views/hall/productList/technologyList.vue

@@ -1,18 +1,34 @@
 <template>
   <div id="technologyList">
-    <p>技术产品服务列表</p>
+    <el-row>
+      <el-col :span="24" class="style">
+        <el-image :src="beijingPic"></el-image>
+        <el-col :span="24" class="info">
+          <div class="w_1200">
+            <el-col :span="24" class="top">
+              <p>吉林省计算中心对接直播大厅</p>
+              <p>主办方：吉林省计算中心</p>
+            </el-col>
+            <el-col :span="24" class="main">
+              主体
+            </el-col>
+          </div>
+        </el-col>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
 import { mapState, createNamespacedHelpers } from 'vuex';
+
 export default {
   name: 'technologyList',
   props: {},
   components: {},
-  data: function() {
-    return {};
-  },
+  data: () => ({
+    beijingPic: require('@a/live/top_3.png'),
+  }),
   created() {},
   methods: {},
   computed: {
@@ -27,4 +43,53 @@ export default {
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.w_1200 {
+  width: 1200px;
+  margin: 0 auto;
+}
+p {
+  padding: 0;
+  margin: 0;
+}
+.textOver {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.style {
+  height: 100vh;
+}
+.style .info {
+  position: relative;
+  top: -450px;
+}
+.style .top {
+  position: relative;
+  top: 0;
+  width: 100%;
+  text-align: center;
+  z-index: 999;
+  height: 172px;
+  margin: 0 0 20px 0;
+}
+.style .top p:first-child {
+  font-size: 50px;
+  color: #fff;
+}
+.style .top p:last-child {
+  font-size: 30px;
+  color: #fff;
+  position: absolute;
+  width: 100%;
+  top: 135px;
+}
+.style .main {
+  min-height: 800px;
+  border-radius: 10px;
+  border: 1px solid #ccc;
+  background: #fff;
+  padding: 30px 20px;
+}
+</style>