|
|
@@ -2,7 +2,35 @@
|
|
|
<div class="floor-list">
|
|
|
<div class="container">
|
|
|
<floor-bar :floors="floors"></floor-bar>
|
|
|
- <a href="/store/33069557578d44e69bd91ad12d28a8d4" target="_blank"><img src="/images/all/banner-cuxiao.png" alt=""></a>
|
|
|
+ <div class="banner">
|
|
|
+ <ul>
|
|
|
+ <li><a href="/store/33069557578d44e69bd91ad12d28a8d4" target="_blank"><img src="/images/all/banner-cuxiao01.png" alt=""></a></li>
|
|
|
+ <li>
|
|
|
+ <div class="banner-cuxiao">
|
|
|
+ <table>
|
|
|
+ <caption><span>最新求购</span><img src="/images/all/banner-cuxiao03.jpg" alt=""></caption>
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <th>发布时间</th>
|
|
|
+ <th>买家名称</th>
|
|
|
+ <th>型号</th>
|
|
|
+ <th>操作</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody>
|
|
|
+ <tr v-for="data in tableData">
|
|
|
+ <td>{{data.publicTime}}</td>
|
|
|
+ <td>{{data.name.slice(0, 1) + '**'}}</td>
|
|
|
+ <td>{{data.productModel | titleFilter}}</td>
|
|
|
+ <td><a>我要报价</a></td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ <a class="purchase">我要求购</a>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
<floor :floor="defaultFloors[0]" :isDefault="true" v-if="!isEmpty"></floor>
|
|
|
<floor :floor="defaultFloors[1]" :isDefault="true" v-if="!isEmpty"></floor>
|
|
|
<floor v-for="(floor, index) in floors.data" :floor="floor" :isDefault="false" :key="index"></floor>
|
|
|
@@ -21,6 +49,27 @@
|
|
|
},
|
|
|
data () {
|
|
|
return {
|
|
|
+ tableData: [{
|
|
|
+ publicTime: '7分钟前',
|
|
|
+ name: '杨某某',
|
|
|
+ productModel: '9w8r9r'
|
|
|
+ }, {
|
|
|
+ publicTime: '7分钟前',
|
|
|
+ name: '杨某某',
|
|
|
+ productModel: '9w8r9r8r78e'
|
|
|
+ }, {
|
|
|
+ publicTime: '7分钟前',
|
|
|
+ name: '杨某某',
|
|
|
+ productModel: '9w8r9r8r78e'
|
|
|
+ }, {
|
|
|
+ publicTime: '7分钟前',
|
|
|
+ name: '杨某某',
|
|
|
+ productModel: '9w8r9r8r78e'
|
|
|
+ }, {
|
|
|
+ publicTime: '7分钟前',
|
|
|
+ name: '杨某某',
|
|
|
+ productModel: '9w8r9r8r78e'
|
|
|
+ }],
|
|
|
defaultFloors: [
|
|
|
{
|
|
|
items: [
|
|
|
@@ -103,6 +152,31 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ },
|
|
|
+ filters: {
|
|
|
+ titleFilter: function (title) {
|
|
|
+ if (title === '') {
|
|
|
+ return title
|
|
|
+ }
|
|
|
+ let len = 0
|
|
|
+ let index = 0
|
|
|
+ for (let i = 0; i < title.length; i++) {
|
|
|
+ if (index === 0 && title.charAt(i).charCodeAt(0) > 255) {
|
|
|
+ len = len + 2
|
|
|
+ } else {
|
|
|
+ len++
|
|
|
+ }
|
|
|
+ if (len > 50) {
|
|
|
+ index = i
|
|
|
+ break
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (index > 0) {
|
|
|
+ return title.substring(0, index) + '...'
|
|
|
+ } else {
|
|
|
+ return title
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
@@ -118,4 +192,111 @@
|
|
|
.floor-list .container > a > img {
|
|
|
margin-top: 30px;
|
|
|
}
|
|
|
+ @keyframes myfirst {
|
|
|
+ 0% {
|
|
|
+ transform: translate(0px, 0px);
|
|
|
+ }
|
|
|
+ 50% {
|
|
|
+ transform: translate(0px, -3px);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ transform: translate(0px, 0px);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .banner{
|
|
|
+ width:1190px;
|
|
|
+ height: 253px;
|
|
|
+ margin-top: 20px;
|
|
|
+ li{
|
|
|
+ float: left;
|
|
|
+ padding-left: 14px;
|
|
|
+ position: relative;
|
|
|
+ &:first-child{
|
|
|
+ padding-left: 0px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .banner-cuxiao {
|
|
|
+ width: 660px;
|
|
|
+ height: 253px;
|
|
|
+ background: url('/images/all/banner-cuxiao02.png') no-repeat;
|
|
|
+ table {
|
|
|
+ width: 436px;
|
|
|
+ caption {
|
|
|
+ color: #f57a2e;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: bold;
|
|
|
+ padding: 10px 30px;
|
|
|
+ img{
|
|
|
+ position: relative;
|
|
|
+ top: -7px;
|
|
|
+ animation: myfirst 1s infinite;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ thead tr th {
|
|
|
+ height: 30px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 14px;
|
|
|
+ background-color: #f57a2e;
|
|
|
+ }
|
|
|
+ tr th, tr td {
|
|
|
+ height: 30px;
|
|
|
+ &:first-child {
|
|
|
+ padding: 6px 7px 6px 16px;
|
|
|
+ }
|
|
|
+ &:nth-child(2) {
|
|
|
+ padding-right: 7px;
|
|
|
+ }
|
|
|
+ &:nth-child(3) {
|
|
|
+ text-align: center;
|
|
|
+ padding: 6px 10px 6px 10px;
|
|
|
+ }
|
|
|
+ &:nth-child(4) {
|
|
|
+ text-align: center;
|
|
|
+ padding: 6px 10px 6px 10px;
|
|
|
+ }
|
|
|
+ a {
|
|
|
+ width: 64px;
|
|
|
+ height: 22px;
|
|
|
+ line-height: 22px;
|
|
|
+ text-align: center;
|
|
|
+ padding: 3px 5px;
|
|
|
+ color: #fd3904;
|
|
|
+ font-size: 12px;
|
|
|
+ border-radius: 2px;
|
|
|
+ border: 1px solid #fd3904;
|
|
|
+ &:hover {
|
|
|
+ border: 1px solid #fd3904;
|
|
|
+ background-color: #fd3904;
|
|
|
+ color: #fff;
|
|
|
+ -moz-box-shadow: 0px 3px 5px #f57a2e; /* 老的 Firefox */
|
|
|
+ box-shadow: 0px 3px 10px #f57a2e;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ tr td{
|
|
|
+ &:first-child {
|
|
|
+ color: #f57a2e;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .purchase {
|
|
|
+ position: absolute;
|
|
|
+ left: 515px;
|
|
|
+ top: 184px;
|
|
|
+ width: 100px;
|
|
|
+ height: 28px;
|
|
|
+ line-height: 28px;
|
|
|
+ background-color: #fff;
|
|
|
+ color: #f57a2e;
|
|
|
+ border-radius: 25px;
|
|
|
+ text-align: center;
|
|
|
+ font-weight: bold;
|
|
|
+ &:hover{
|
|
|
+ background-color: #FB6102;
|
|
|
+ color: #fff;
|
|
|
+ box-shadow: 0px 3px 10px #fd863d;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|