cvsip
/
cvsip-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: 固定底部

main
sankeyangshu 2024-12-14 14:04:28 +08:00
parent 4fb4db7de3
commit 1446d4e525
2 changed files with 59 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
src/views/Boat/components/BoatTable.vue
View File

@ -53,11 +53,12 @@
</template>
</el-table-column>
</el-table>
<div class="left-export">
<svg-icon icon="Export" className="icon"></svg-icon>
<div class="export-text" @click="onClickExportBoat">导出船期表</div>
</div>
</div>
<div class="left-export">
<svg-icon icon="Export" className="icon"></svg-icon>
<div class="export-text" @click="onClickExportBoat">导出船期表</div>
</div>
<!-- 分页 -->
<div class="footer-pagination">
<div class="notice-wrap"><div class="notice">仅列出最近十日收到的订阅船期信息</div></div>
@ -238,14 +239,9 @@ const onClickCellOpenDetail = (row: BoatInfoType) => {
flex-direction: column;
padding: 16px;
overflow: hidden;
.footer-util {
display: flex;
flex-shrink: 0;
justify-content: flex-end;
margin-bottom: 15px;
}
.footer-table {
position: relative;
flex: 1;
.goods-name {
overflow: hidden;
text-overflow: ellipsis;
@ -271,32 +267,32 @@ const onClickCellOpenDetail = (row: BoatInfoType) => {
background-color: rgb(109 0 14 / 100%);
}
}
}
.left-export {
box-sizing: border-box;
display: flex;
align-items: center;
width: fit-content;
height: 50px;
padding: 0 20px 0 15px;
margin-top: 20px;
margin-bottom: 10px;
font-size: 18px;
color: #00bfbf;
border-bottom: #00bfbf 1px solid;
.icon {
width: 40px;
height: 40px;
font-weight: 400;
line-height: normal;
.left-export {
box-sizing: border-box;
display: flex;
align-items: center;
width: fit-content;
height: 50px;
padding: 0 20px 0 15px;
margin-top: 20px;
margin-bottom: 10px;
font-size: 18px;
color: #00bfbf;
}
.export-text {
margin-left: 15px;
}
.export-text:hover {
color: rgb(2 167 240);
cursor: pointer;
border-bottom: #00bfbf 1px solid;
.icon {
width: 40px;
height: 40px;
font-weight: 400;
line-height: normal;
color: #00bfbf;
}
.export-text {
margin-left: 15px;
}
.export-text:hover {
color: rgb(2 167 240);
cursor: pointer;
}
}
}
.footer-pagination {
@ -313,7 +309,6 @@ const onClickCellOpenDetail = (row: BoatInfoType) => {
justify-content: center;
width: 700px;
height: 40px;
margin-top: 30px;
overflow: hidden;
font-size: 16px;
color: #d7d7d7;

44
src/views/Home/index.vue
View File

@ -56,10 +56,12 @@
<div class="text">{{ searchTableForm.vin }}</div>
的航运物流跟踪
</div>
<div class="vin-table" v-for="(item, index) in vinData" :key="index">
<div>{{ item.schedule.createDate }}</div>
<div>{{ item.schedule.loadPort.name }}</div>
<div>{{ item.shipStatus }}</div>
<div class="vin-wrap">
<div class="vin-table" v-for="(item, index) in vinData" :key="index">
<div>{{ item.schedule.createDate }}</div>
<div>{{ item.schedule.loadPort.name }}</div>
<div>{{ item.shipStatus }}</div>
</div>
</div>
</div>
</div>
@ -555,7 +557,7 @@ onMounted(async () => {
flex-direction: column;
width: 100%;
height: 100%;
padding: 40px;
padding: 40px 40px 16px;
.home-search {
display: flex;
align-items: center;
@ -617,17 +619,17 @@ onMounted(async () => {
}
}
.home-footer {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
padding-bottom: 16px;
.notice {
display: flex;
align-items: center;
justify-content: center;
width: 700px;
height: 40px;
margin-top: 30px;
overflow: hidden;
font-size: 16px;
color: #d7d7d7;
@ -662,17 +664,27 @@ onMounted(async () => {
text-decoration: underline;
}
}
.vin-table {
box-sizing: border-box;
.vin-wrap {
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
justify-content: space-between;
width: 80%;
height: 50px;
font-size: 18px;
color: #fff;
background-color: rgb(255 255 255 / 0%);
border-bottom: 1px solid rgb(215 215 215 / 100%);
justify-content: center;
width: 100%;
overflow-y: auto;
.vin-table {
box-sizing: border-box;
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: space-between;
width: 80%;
height: 50px;
font-size: 18px;
color: #fff;
background-color: rgb(255 255 255 / 0%);
border-bottom: 1px solid rgb(215 215 215 / 100%);
}
}
}
}