4 changed files with 132 additions and 56 deletions
@ -0,0 +1,128 @@ |
|||||
|
<template> |
||||
|
<div class="about"> |
||||
|
<a-tabs> |
||||
|
<a-tab-pane key="1" tab="初选"> |
||||
|
|
||||
|
</a-tab-pane> |
||||
|
<a-tab-pane key="2" tab="精选"> |
||||
|
|
||||
|
</a-tab-pane> |
||||
|
<a-tab-pane key="3" tab="已上架"> |
||||
|
|
||||
|
</a-tab-pane> |
||||
|
<a-tab-pane key="4" tab="放弃"> |
||||
|
|
||||
|
</a-tab-pane> |
||||
|
</a-tabs> |
||||
|
|
||||
|
<a-card> |
||||
|
<a-row > |
||||
|
<a-col :span="3"> |
||||
|
<div class="headCol headColFirst">商品信息</div> |
||||
|
</a-col> |
||||
|
<a-col :span="1"> |
||||
|
<div class="headCol">平台</div> |
||||
|
</a-col> |
||||
|
<a-col :span="2"> |
||||
|
<div class="headCol">SKU名称</div> |
||||
|
</a-col> |
||||
|
<a-col :span="1"> |
||||
|
<div class="headCol">采购链接</div> |
||||
|
</a-col> |
||||
|
<a-col :span="2"> |
||||
|
<div class="headCol">供应商来源方式</div> |
||||
|
</a-col> |
||||
|
<a-col :span="1"> |
||||
|
<div class="headCol">采购价</div> |
||||
|
</a-col> |
||||
|
<a-col :span="1"> |
||||
|
<div class="headCol">快递费</div> |
||||
|
</a-col> |
||||
|
<a-col :span="1"> |
||||
|
<div class="headCol">平台扣点</div> |
||||
|
</a-col> |
||||
|
<a-col :span="1"> |
||||
|
<div class="headCol">利润率</div> |
||||
|
</a-col> |
||||
|
<a-col :span="3"> |
||||
|
<div class="headCol">对标商品信息</div> |
||||
|
</a-col> |
||||
|
</a-row> |
||||
|
|
||||
|
|
||||
|
<!--内容页面--> |
||||
|
<a-row justify="center" style="text-align: center;"> |
||||
|
<a-col :span="3"> |
||||
|
<div style="height: 80px;">商品信息</div> |
||||
|
</a-col> |
||||
|
<a-col :span="1"> |
||||
|
<div>平台</div> |
||||
|
<div>平台</div> |
||||
|
<div>平台</div> |
||||
|
<div>平台</div> |
||||
|
</a-col> |
||||
|
<a-col :span="2"> |
||||
|
<div>SKU名称</div> |
||||
|
</a-col> |
||||
|
<a-col :span="1"> |
||||
|
<div>采购链接</div> |
||||
|
</a-col> |
||||
|
<a-col :span="2"> |
||||
|
<div>供应商来源方式</div> |
||||
|
</a-col> |
||||
|
<a-col :span="1"> |
||||
|
<div>采购价</div> |
||||
|
</a-col> |
||||
|
<a-col :span="1"> |
||||
|
<div>快递费</div> |
||||
|
</a-col> |
||||
|
<a-col :span="1"> |
||||
|
<div>平台扣点</div> |
||||
|
</a-col> |
||||
|
<a-col :span="1"> |
||||
|
<div>利润率</div> |
||||
|
</a-col> |
||||
|
<a-col :span="3"> |
||||
|
<div style="height: 80px;">对标商品信息</div> |
||||
|
</a-col> |
||||
|
<!--操作--> |
||||
|
<a-col :span="24"> |
||||
|
<a-row> |
||||
|
<a-col :span="3"> |
||||
|
<div>对标商品信息</div> |
||||
|
</a-col> |
||||
|
<a-col :span="10">操作</a-col> |
||||
|
<a-col :span="3"> |
||||
|
<div>对标商品信息</div> |
||||
|
</a-col> |
||||
|
</a-row> |
||||
|
</a-col> |
||||
|
</a-row> |
||||
|
|
||||
|
</a-card> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
.headCol { |
||||
|
border: 1px solid rgba(215, 215, 215, 1); |
||||
|
border-left: 0px; |
||||
|
text-align: center; |
||||
|
background-color: rgba(243, 242, 247, 1); |
||||
|
} |
||||
|
|
||||
|
.headColFirst { |
||||
|
border-left: 1px solid rgba(215, 215, 215, 1); |
||||
|
} |
||||
|
</style> |
||||
@ -1,49 +0,0 @@ |
|||||
<html lang="zh-CN"> |
|
||||
|
|
||||
<head> |
|
||||
<meta charset="utf-8"> |
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script> |
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"> |
|
||||
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.min.js"></script> |
|
||||
</head> |
|
||||
|
|
||||
<body> |
|
||||
<div id="app"> |
|
||||
<ul class="nav nav-tabs"> |
|
||||
<li @click="()=>{selectType=item.value}" class="nav-item" v-for="(item,index) in typeList" :key="index"> |
|
||||
<a :class="selectType==item.value?'nav-link active':'nav-link'" aria-current="page" |
|
||||
href="#">{{item.name}}</a> |
|
||||
</li> |
|
||||
</ul> |
|
||||
|
|
||||
<div> |
|
||||
<a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a> |
|
||||
<div class="collapse multi-collapse" id="multiCollapseExample1"> |
|
||||
<div class="card card-body"> |
|
||||
Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger. |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</body> |
|
||||
|
|
||||
<script> |
|
||||
|
|
||||
var vm = new Vue({ |
|
||||
el: '#app', |
|
||||
data: { |
|
||||
selectType: 1, |
|
||||
typeList: [{ name: '淘宝', value: 1 }, { name: '京东', value: 2 }, { name: '拼多多', value: 3 }] |
|
||||
}, |
|
||||
created() { |
|
||||
|
|
||||
}, |
|
||||
methods: { |
|
||||
|
|
||||
}, |
|
||||
}) |
|
||||
</script> |
|
||||
|
|
||||
</html> |
|
||||
Loading…
Reference in new issue