|
@@ -0,0 +1,177 @@
|
|
|
+<template>
|
|
|
+ <div class="bid_msg">
|
|
|
+ <h3>杭州琴月文创娱乐有限公司<span>已认证</span></h3>
|
|
|
+ <div class="filter_lis">
|
|
|
+ <div class="high">高级筛选</div>
|
|
|
+ <el-button plain class="btn1">导出结果</el-button>
|
|
|
+ <el-button plain class="btn1 btn2" @click="book">订阅设置</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="list_data">
|
|
|
+ <ul>
|
|
|
+ <li :key="index" v-for="(item, index) in listData">
|
|
|
+ <router-link to="/">
|
|
|
+ <div class="tit">{{item.name}}</div>
|
|
|
+ <div class="bot">
|
|
|
+ <span class="spa1">{{item.area}}</span>
|
|
|
+ <span class="spa1" style="margin: 0 10px">{{item.tips1}}</span>
|
|
|
+ <span class="spa1 spa2" :class="{lActive:item.tips2 == '1'}">{{item.tips2 == '1'?"成交":"招标"}}</span>
|
|
|
+ <span class="spa3">{{item.date}}</span>
|
|
|
+ </div>
|
|
|
+ </router-link>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <el-pagination
|
|
|
+ background
|
|
|
+ layout="prev, pager, next"
|
|
|
+ :total="1000">
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tips: false,
|
|
|
+ listData: [{
|
|
|
+ date: '13小时前',
|
|
|
+ name: '海市普陀区金沙江路海市普陀区金沙江路海市普陀区金沙江路海市普陀区金沙江路',
|
|
|
+ area: '上海',
|
|
|
+ tips1: '出版广电',
|
|
|
+ tips2: '0'
|
|
|
+ }, {
|
|
|
+ date: '13小时前',
|
|
|
+ name: '海市普陀区金沙江路海市普陀区金沙江路海市普陀区金沙江路海市普陀区金沙江路',
|
|
|
+ area: '上海',
|
|
|
+ tips1: '出版广电',
|
|
|
+ tips2: '1'
|
|
|
+ }, {
|
|
|
+ date: '13小时前',
|
|
|
+ name: '海市普陀区金沙江路海市普陀区金沙江路海市普陀区金沙江路海市普陀区金沙江路',
|
|
|
+ area: '上海',
|
|
|
+ tips1: '出版广电',
|
|
|
+ tips2: '0'
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ book() {
|
|
|
+ const news = this.$router.resolve({path: '/subscribe'});
|
|
|
+ window.open(news.href,'_blank');
|
|
|
+ },
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.bid_msg {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ padding: 30px;
|
|
|
+ h3 {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: initial;
|
|
|
+ align-self: start;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 20px;
|
|
|
+ span {
|
|
|
+ width: 56px;
|
|
|
+ height: 20px;
|
|
|
+ line-height: 20px;
|
|
|
+ text-align: center;
|
|
|
+ color: #2ABED1;
|
|
|
+ font-size: 13px;
|
|
|
+ border: 1px solid #2ABED1;
|
|
|
+ border-radius: 10px;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .filter_lis {
|
|
|
+ width: 1020px;
|
|
|
+ height: 50px;
|
|
|
+ line-height: 50px;
|
|
|
+ background: #F7F7F7;
|
|
|
+ border-radius: 4px;
|
|
|
+ margin-top: 20px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ padding: 0 20px 0 20px;
|
|
|
+ display: flex;
|
|
|
+ align-self: start;
|
|
|
+ align-items: center;
|
|
|
+ .high {
|
|
|
+ padding: 13px 0;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #2CB7CA;
|
|
|
+ margin-right: 44px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .btn1 {
|
|
|
+ padding: 6px 17px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #1d1d1d;
|
|
|
+ border: 1px solid #E0E0E0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+ .btn2 {
|
|
|
+ position: absolute;
|
|
|
+ right: 50px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list_data {
|
|
|
+ ul {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ li {
|
|
|
+ text-align: left;
|
|
|
+ a {
|
|
|
+ display: inline-block;
|
|
|
+ width: 100%;
|
|
|
+ line-height: 24px;
|
|
|
+ box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.05);
|
|
|
+ padding: 18px 0;
|
|
|
+ .tit {
|
|
|
+ width: 800px;
|
|
|
+ font-size: 16px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow:ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ .bot {
|
|
|
+ margin-top: 6px;
|
|
|
+ .spa1 {
|
|
|
+ border: 1px solid #ECECEC;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 4px;
|
|
|
+ background: #F7F9FA;
|
|
|
+ padding: 3px 10px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #686868;
|
|
|
+ }
|
|
|
+ .spa2 {
|
|
|
+ color: #2CB7CA;
|
|
|
+ border-color: #2CB7CA;
|
|
|
+ background: none;
|
|
|
+ }
|
|
|
+ .spa3 {
|
|
|
+ float: right;
|
|
|
+ color: #999;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ .lActive {
|
|
|
+ color: #FF9F40;
|
|
|
+ border-color: #FF9F40;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &:hover {
|
|
|
+ .tit {
|
|
|
+ color: #2CB7CA;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|