浏览代码

更新直播大厅

guhongwei 5 年之前
父节点
当前提交
daf0d97a3d
共有 2 个文件被更改,包括 555 次插入59 次删除
  1. 11 11
      src/style/style.css
  2. 544 48
      src/views/live/hall/hall.vue

+ 11 - 11
src/style/style.css

@@ -342,9 +342,8 @@ p {
 
 .livemain .gongqiu {
 	width: 100%;
-	height: 625px;
-	overflow: hidden;
-	margin: 0 0 10px 0;
+	min-height: 690px;
+  margin: 0 0 10px 0;
 }
 
 .livemain .gongqiu .gongqiuTop {
@@ -353,7 +352,7 @@ p {
 }
 
 .livemain .gongqiu .gongqiuInfo {
-	height: 498px;
+	/* height: 498px; */
 	overflow: hidden;
 }
 
@@ -633,7 +632,7 @@ p {
 
 .fangtan .jiabin {
 	float: left;
-	width: 400px;
+	width: 380px;
 	border-radius: 5px;
 	box-shadow: 0 0 5px #ccc;
 	padding: 0 10px 0px 10px;
@@ -680,7 +679,7 @@ p {
 
 .jiabin .jiabinlist ul li p {
 	float: left;
-	width: 73%;
+	width: 71%;
 	padding: 0 0 0 10px;
 }
 
@@ -712,11 +711,11 @@ p {
 
 .fangtan .luyan {
 	float: left;
-	width: 400px;
+	width: 380px;
 	border-radius: 5px;
 	box-shadow: 0 0 5px #ccc;
 	padding: 0 10px 0px 10px;
-	margin: 4px 15px 0 3px;
+	margin: 4px 10px 0 3px;
 }
 
 .luyanList {
@@ -757,7 +756,7 @@ p {
 
 .fangtan .chat {
 	float: left;
-	width: 358px;
+	width: 344px;
 	height: 545px;
 	border-radius: 5px;
 	box-shadow: 0 0 5px #ccc;
@@ -827,8 +826,9 @@ p {
 
 .chat .chatList .input input {
 	border: 1px solid #ccc;
-	float: left;
-	width: 80%;
+  float: left;
+  height: 38px;
+	width: 79%;
 }
 
 .chat .chatList .input button {

+ 544 - 48
src/views/live/hall/hall.vue

@@ -75,7 +75,7 @@
                 <img :src="img.main2" />
               </div>
               <div class="gongqiuInfo">
-                <div id="tab">
+                <!-- <div id="tab">
                   <div class="tabList">
                     <ul>
                       <li class="cur">找技术</li>
@@ -150,7 +150,85 @@
                       </ul>
                     </div>
                   </div>
-                </div>
+                </div> -->
+                <el-tabs type="border-card">
+                  <el-tab-pane label="找技术">
+                    <el-col :span="24">
+                      <ul class="technology">
+                        <li class="technologyList" v-for="(item, index) in technologyList" :key="index">
+                          <el-col :span="14" class="left">
+                            <p>{{ item.title }}</p>
+                            <p>
+                              <span><i class="el-icon-user-solid" style="color:#FFA500;margin:0 5px 0 0;"></i>{{ item.name }}</span>
+                              <span><i class="el-icon-location" style="color:#FFA500;margin:0 5px 0 0;"></i>{{ item.address }}</span>
+                            </p>
+                            <p>
+                              <span>类型:{{ item.type }}</span>
+                              <span>成熟度:{{ item.chengshu }}</span>
+                              <span>交易方式:{{ item.fanngshi }}</span>
+                              <span>交易价格:{{ item.money }}</span>
+                            </p>
+                          </el-col>
+                          <el-col :span="10" class="right">
+                            <p>摘要:{{ item.intro }}</p>
+                          </el-col>
+                        </li>
+                      </ul>
+                    </el-col>
+                  </el-tab-pane>
+                  <el-tab-pane label="找需求">
+                    <el-col :span="24">
+                      <ul class="demand">
+                        <li class="demandList" v-for="(item, index) in demandList" :key="index">
+                          <p>{{ item.title }}</p>
+                          <p>
+                            <span>行业分类:{{ item.hyfl }}</span>
+                            <span>发布时间:{{ item.date }}</span>
+                          </p>
+                          <p>
+                            <span>需求类型:{{ item.xqlx }}</span>
+                            <span>{{ item.address }}</span>
+                          </p>
+                        </li>
+                      </ul>
+                    </el-col>
+                  </el-tab-pane>
+                  <el-tab-pane label="找服务">
+                    <el-col :span="24">
+                      <ul class="service">
+                        <li class="serviceList" v-for="(item, index) in serviceList" :key="index">
+                          <p class="company">{{ item.company }}</p>
+                          <div class="serviceDown">
+                            <el-image :src="item.logo"></el-image>
+                            <p>
+                              <button>立即咨询</button>
+                              <span class="type1">服务类型:</span>
+                              <span class="type2">{{ item.type }}</span>
+                            </p>
+                          </div>
+                          <button class="btn">进入主页</button>
+                        </li>
+                      </ul>
+                    </el-col>
+                  </el-tab-pane>
+                  <el-tab-pane label="找专家">
+                    <el-col :span="24">
+                      <ul class="expert">
+                        <li class="expertList" v-for="(item, index) in expertList" :key="index">
+                          <el-image :src="item.logo"></el-image>
+                          <div>
+                            <p>
+                              <span>{{ item.name }}</span>
+                              <span>{{ item.address }}</span>
+                            </p>
+                            <p>从事领域:{{ item.csly }}</p>
+                            <p>擅长能力:{{ item.scly }}</p>
+                          </div>
+                        </li>
+                      </ul>
+                    </el-col>
+                  </el-tab-pane>
+                </el-tabs>
               </div>
             </div>
             <div class="fangtan">
@@ -161,44 +239,12 @@
                 </p>
                 <div class="jiabinlist">
                   <ul>
-                    <li>
-                      <img :src="img.img" />
-                      <p>
-                        <span class="textOver">访谈标题</span>
-                        <span>2020-02-02 10:00</span>
-                        <span class="text"
-                          >区块链技术作为当下信息技术产业最前沿的技术之一,也是继大数据技术后最受各界关注的领域,我国已将区我国已将区我国已将区我国已将区我国已将区
-                        </span>
-                      </p>
-                    </li>
-                    <li>
-                      <img :src="img.img" />
-                      <p>
-                        <span class="textOver">访谈标题</span>
-                        <span>2020-02-02 10:00</span>
-                        <span
-                          >区块链技术作为当下信息技术产业最前沿的技术之一,也是继大数据技术后最受各界关注的领域,我国已将区我国已将区我国已将区我国已将区我国已将区
-                        </span>
-                      </p>
-                    </li>
-                    <li>
-                      <img :src="img.img" />
+                    <li v-for="(item, index) in jiabinlist" :key="index">
+                      <img :src="item.logo" />
                       <p>
-                        <span class="textOver">访谈标题</span>
-                        <span>2020-02-02 10:00</span>
-                        <span
-                          >区块链技术作为当下信息技术产业最前沿的技术之一,也是继大数据技术后最受各界关注的领域,我国已将区我国已将区我国已将区我国已将区我国已将区我国已将区
-                        </span>
-                      </p>
-                    </li>
-                    <li>
-                      <img :src="img.img" />
-                      <p>
-                        <span class="textOver">访谈标题</span>
-                        <span>2020-02-02 10:00</span>
-                        <span
-                          >区块链技术作为当下信息技术产业最前沿的技术之一,也是继大数据技术后最受各界关注的领域,我国已将区我国已将区我国已将区我国已将区我国已将区
-                        </span>
+                        <span class="textOver">{{ item.title }}</span>
+                        <span>{{ item.date }}</span>
+                        <span class="text">{{ item.content }} </span>
                       </p>
                     </li>
                   </ul>
@@ -325,16 +371,239 @@ export default {
   name: 'hall',
   props: {},
   components: {},
-  data: () => {
-    return {
-      img: {
-        main1: require('@/assets/live/main1.png'),
-        main2: require('@/assets/live/main2.png'),
-        logo20: require('@/assets/live/logo20.png'),
-        img: require('@/assets/live/测试图片.jpg'),
+  data: () => ({
+    img: {
+      main1: require('@/assets/live/main1.png'),
+      main2: require('@/assets/live/main2.png'),
+      logo20: require('@/assets/live/logo20.png'),
+      img: require('@/assets/live/测试图片.jpg'),
+    },
+    // 找技术
+    technologyList: [
+      {
+        title: '产品名称',
+        name: '技术人',
+        address: '吉林省 长春市',
+        type: '常用类型',
+        chengshu: '正在研发',
+        fanngshi: '许可方式',
+        money: '面议',
+        intro:
+          '本发明属于医药技术领域,公开了一种加味双黄连口服液及其制备方法,取黄芩加水浸泡30分钟,煎煮二次合并煎液,滤过浓缩,pH值至1.5~2.0,保温1小时,静置24小时,滤过浓缩,调pH值至7.0',
       },
-    };
-  },
+      {
+        title: '产品名称',
+        name: '技术人',
+        address: '吉林省 长春市',
+        type: '常用类型',
+        chengshu: '正在研发',
+        fanngshi: '许可方式',
+        money: '面议',
+        intro:
+          '本发明属于医药技术领域,公开了一种加味双黄连口服液及其制备方法,取黄芩加水浸泡30分钟,煎煮二次合并煎液,滤过浓缩,pH值至1.5~2.0,保温1小时,静置24小时,滤过浓缩,调pH值至7.0',
+      },
+      {
+        title: '产品名称',
+        name: '技术人',
+        address: '吉林省 长春市',
+        type: '常用类型',
+        chengshu: '正在研发',
+        fanngshi: '许可方式',
+        money: '面议',
+        intro:
+          '本发明属于医药技术领域,公开了一种加味双黄连口服液及其制备方法,取黄芩加水浸泡30分钟,煎煮二次合并煎液,滤过浓缩,pH值至1.5~2.0,保温1小时,静置24小时,滤过浓缩,调pH值至7.0',
+      },
+      {
+        title: '产品名称',
+        name: '技术人',
+        address: '吉林省 长春市',
+        type: '常用类型',
+        chengshu: '正在研发',
+        fanngshi: '许可方式',
+        money: '面议',
+        intro:
+          '本发明属于医药技术领域,公开了一种加味双黄连口服液及其制备方法,取黄芩加水浸泡30分钟,煎煮二次合并煎液,滤过浓缩,pH值至1.5~2.0,保温1小时,静置24小时,滤过浓缩,调pH值至7.0',
+      },
+    ],
+    // 找需求
+    demandList: [
+      {
+        title: '寻求以后创伤抗抑郁药药物的绣球',
+        hyfl: '医药与医疗-生物医药',
+        date: '2020-02-01',
+        xqlx: '技术难题解决',
+        address: '吉林省长春市',
+      },
+      {
+        title: '寻求以后创伤抗抑郁药药物的绣球',
+        hyfl: '医药与医疗-生物医药',
+        date: '2020-02-01',
+        xqlx: '技术难题解决',
+        address: '吉林省长春市',
+      },
+      {
+        title: '寻求以后创伤抗抑郁药药物的绣球',
+        hyfl: '医药与医疗-生物医药',
+        date: '2020-02-01',
+        xqlx: '技术难题解决',
+        address: '吉林省长春市',
+      },
+      {
+        title: '寻求以后创伤抗抑郁药药物的绣球',
+        hyfl: '医药与医疗-生物医药',
+        date: '2020-02-01',
+        xqlx: '技术难题解决',
+        address: '吉林省长春市',
+      },
+      {
+        title: '寻求以后创伤抗抑郁药药物的绣球',
+        hyfl: '医药与医疗-生物医药',
+        date: '2020-02-01',
+        xqlx: '技术难题解决',
+        address: '吉林省长春市',
+      },
+      {
+        title: '寻求以后创伤抗抑郁药药物的绣球',
+        hyfl: '医药与医疗-生物医药',
+        date: '2020-02-01',
+        xqlx: '技术难题解决',
+        address: '吉林省长春市',
+      },
+      {
+        title: '寻求以后创伤抗抑郁药药物的绣球',
+        hyfl: '医药与医疗-生物医药',
+        date: '2020-02-01',
+        xqlx: '技术难题解决',
+        address: '吉林省长春市',
+      },
+      {
+        title: '寻求以后创伤抗抑郁药药物的绣球',
+        hyfl: '医药与医疗-生物医药',
+        date: '2020-02-01',
+        xqlx: '技术难题解决',
+        address: '吉林省长春市',
+      },
+    ],
+    // 找服务
+    serviceList: [
+      {
+        company: '长春福瑞科技有限公司',
+        logo: require('@/assets/live/logo20.png'),
+        type: '科技服务',
+      },
+      {
+        company: '长春福瑞科技有限公司',
+        logo: require('@/assets/live/logo20.png'),
+        type: '科技服务',
+      },
+      {
+        company: '长春福瑞科技有限公司',
+        logo: require('@/assets/live/logo20.png'),
+        type: '科技服务',
+      },
+      {
+        company: '长春福瑞科技有限公司',
+        logo: require('@/assets/live/logo20.png'),
+        type: '科技服务',
+      },
+      {
+        company: '长春福瑞科技有限公司',
+        logo: require('@/assets/live/logo20.png'),
+        type: '科技服务',
+      },
+      {
+        company: '长春福瑞科技有限公司',
+        logo: require('@/assets/live/logo20.png'),
+        type: '科技服务',
+      },
+    ],
+    // 找专家
+    expertList: [
+      {
+        logo: require('@/assets/live/测试图片.jpg'),
+        name: '万事通',
+        address: '吉林省长春市',
+        csly: '计算机,电脑,啥都有',
+        scnl: '全能,啥都会,没有他不会的',
+      },
+      {
+        logo: require('@/assets/live/测试图片.jpg'),
+        name: '万事通',
+        address: '吉林省长春市',
+        csly: '计算机,电脑,啥都有',
+        scnl: '全能,啥都会,没有他不会的',
+      },
+      {
+        logo: require('@/assets/live/测试图片.jpg'),
+        name: '万事通',
+        address: '吉林省长春市',
+        csly: '计算机,电脑,啥都有',
+        scnl: '全能,啥都会,没有他不会的',
+      },
+      {
+        logo: require('@/assets/live/测试图片.jpg'),
+        name: '万事通',
+        address: '吉林省长春市',
+        csly: '计算机,电脑,啥都有',
+        scnl: '全能,啥都会,没有他不会的',
+      },
+      {
+        logo: require('@/assets/live/测试图片.jpg'),
+        name: '万事通',
+        address: '吉林省长春市',
+        csly: '计算机,电脑,啥都有',
+        scnl: '全能,啥都会,没有他不会的',
+      },
+      {
+        logo: require('@/assets/live/测试图片.jpg'),
+        name: '万事通',
+        address: '吉林省长春市',
+        csly: '计算机,电脑,啥都有',
+        scnl: '全能,啥都会,没有他不会的',
+      },
+      {
+        logo: require('@/assets/live/测试图片.jpg'),
+        name: '万事通',
+        address: '吉林省长春市',
+        csly: '计算机,电脑,啥都有',
+        scnl: '全能,啥都会,没有他不会的',
+      },
+      {
+        logo: require('@/assets/live/测试图片.jpg'),
+        name: '万事通',
+        address: '吉林省长春市',
+        csly: '计算机,电脑,啥都有',
+        scnl: '全能,啥都会,没有他不会的',
+      },
+    ],
+    // 嘉宾
+    jiabinlist: [
+      {
+        logo: require('@/assets/live/logo20.png'),
+        title: '访谈标题',
+        date: '2020-02-02 10:00',
+        content: '区块链技术作为当下信息技术产业最前沿的技术之一,也是继大数据技术后最受各界关注的领域,我国已将区我国已将区我国已将区我国已将区我国已将区',
+      },
+      {
+        logo: require('@/assets/live/logo20.png'),
+        title: '访谈标题',
+        date: '2020-02-02 10:00',
+        content: '区块链技术作为当下信息技术产业最前沿的技术之一,也是继大数据技术后最受各界关注的领域,我国已将区我国已将区我国已将区我国已将区我国已将区',
+      },
+      {
+        logo: require('@/assets/live/logo20.png'),
+        title: '访谈标题',
+        date: '2020-02-02 10:00',
+        content: '区块链技术作为当下信息技术产业最前沿的技术之一,也是继大数据技术后最受各界关注的领域,我国已将区我国已将区我国已将区我国已将区我国已将区',
+      },
+      {
+        logo: require('@/assets/live/logo20.png'),
+        title: '访谈标题',
+        date: '2020-02-02 10:00',
+        content: '区块链技术作为当下信息技术产业最前沿的技术之一,也是继大数据技术后最受各界关注的领域,我国已将区我国已将区我国已将区我国已将区我国已将区',
+      },
+    ],
+  }),
   created() {},
   methods: {},
   computed: {
@@ -351,4 +620,231 @@ export default {
 
 <style lang="less" scoped>
 @import '~@/style/style.css';
+// 找技术
+// .technology {
+// }
+.technology .technologyList {
+  float: left;
+  width: 100%;
+  padding: 10px 0;
+  border-bottom: 1px solid #ccc;
+}
+.technology .technologyList:hover .left p:first-child {
+  color: #005293;
+  font-weight: bold;
+}
+.technologyList .left p:first-child {
+  font-size: 18px;
+  float: left;
+  width: 100%;
+}
+.technologyList .left p:nth-child(2) {
+  float: left;
+  width: 100%;
+  padding: 10px 0;
+}
+.technologyList .left p:nth-child(2) span:first-child {
+  display: inline-block;
+  width: 50%;
+  font-size: 16px;
+}
+.technologyList .left p:nth-child(2) span:last-child {
+  display: inline-block;
+  width: 50%;
+  font-size: 16px;
+}
+.technologyList .left p:last-child {
+  float: left;
+  width: 100%;
+  padding: 0 0 15px 0;
+}
+.technologyList .left p:last-child span {
+  display: inline-block;
+  width: 22%;
+  font-size: 16px;
+  margin: 0 15px 0 0;
+}
+.technologyList .right {
+  float: left;
+  width: 41%;
+  border: 1px solid red;
+  height: 100px;
+  padding: 5px;
+}
+.technologyList .right p {
+  background: #fff8fd;
+  height: 68px;
+  padding: 10px;
+  font-size: 14px;
+  line-height: 24px;
+  overflow: hidden;
+}
+// 找需求
+// .demand {
+// }
+.demand .demandList {
+  float: left;
+  width: 50%;
+  border-bottom: 1px solid #ccc;
+  margin: 0 0 20px 0;
+}
+.demand .demandList:hover p:first-child {
+  color: #005293;
+  font-weight: bold;
+}
+.demand .demandList p:first-child {
+  float: left;
+  width: 100%;
+  font-size: 18px;
+  font-weight: bold;
+}
+.demand .demandList p:nth-child(2) {
+  float: left;
+  font-size: 16px;
+  padding: 10px 0;
+  width: 100%;
+}
+.demand .demandList p:nth-child(2) span:first-child {
+  display: inline-block;
+  width: 50%;
+  text-align: left;
+}
+.demand .demandList p:nth-child(2) span:last-child {
+  display: inline-block;
+  width: 50%;
+  text-align: left;
+}
+.demand .demandList p:last-child {
+  float: left;
+  font-size: 16px;
+  padding: 10px 0;
+  width: 100%;
+}
+.demand .demandList p:last-child span:first-child {
+  display: inline-block;
+  width: 50%;
+  text-align: left;
+}
+.demand .demandList p:last-child span:last-child {
+  display: inline-block;
+  width: 50%;
+  text-align: left;
+}
+// 找服务
+// .service{
+// }
+.service .serviceList {
+  float: left;
+  width: 30%;
+  border: 1px solid #ccc;
+  margin: 21px 18px;
+}
+.service .serviceList:hover {
+  box-shadow: 0 0 10px #ccc;
+}
+.service .serviceList .company {
+  font-size: 18px;
+  padding: 10px;
+}
+.service .serviceList .serviceDown {
+  float: left;
+  width: 100%;
+}
+.service .serviceList .serviceDown .el-image {
+  float: left;
+  width: 100px;
+  height: 100px;
+  margin: 10px;
+}
+.service .serviceList .serviceDown p {
+  float: left;
+  width: 65%;
+}
+.service .serviceList .serviceDown p button {
+  float: left;
+  width: 50%;
+  border: 1px solid #ddd;
+  height: 25px;
+  color: #39c;
+  margin: 0 0 0 15px;
+}
+.service .serviceList .serviceDown p .type1 {
+  float: left;
+  width: 100%;
+  padding: 15px 0 15px 20px;
+}
+.service .serviceList .serviceDown p .type2 {
+  padding: 0 0 0 20px;
+  color: darkorange;
+  font-weight: bold;
+  font-size: 16px;
+  float: left;
+  width: 100%;
+}
+.service .serviceList .btn {
+  font-size: 16px;
+  float: left;
+  width: 100%;
+  padding: 9px 0;
+  text-align: center;
+  color: #fff;
+  background: orangered;
+}
+// 找专家
+// .expert {
+// }
+.expert .expertList {
+  float: left;
+  width: 574px;
+  border: 1px solid #ccc;
+  margin: 0 15px 15px 0;
+  padding: 5px 0 5px 0;
+}
+.expert .expertList:hover {
+  box-shadow: 0 0 5px green;
+}
+.expert .expertList:nth-child(2n) {
+  margin: 0;
+}
+.expert .expertList .el-image {
+  float: left;
+  width: 100px;
+  height: 100px;
+  border-radius: 90px;
+}
+.expert .expertList div {
+  float: left;
+  width: 82%;
+}
+.expert .expertList div p:first-child {
+  float: left;
+  width: 100%;
+  padding: 5px 0 10px 0;
+}
+.expert .expertList div p:first-child span:first-child {
+  float: left;
+  width: 50%;
+  font-size: 16px;
+  color: #333;
+  font-weight: bold;
+}
+.expert .expertList div p:first-child span:last-child {
+  float: left;
+  width: 50%;
+  font-size: 16px;
+}
+.expert .expertList div p:nth-child(2) {
+  float: left;
+  width: 100%;
+  font-size: 16px;
+  color: #666;
+  padding: 0 0 5px 0;
+}
+.expert .expertList div p:last-child {
+  float: left;
+  width: 100%;
+  font-size: 16px;
+  color: #666;
+  padding: 5px 0 0 0;
+}
 </style>