You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
124 lines
3.1 KiB
124 lines
3.1 KiB
<template>
|
|
<view class="ship-detail-bg">
|
|
<NavBar title="船舶详情" />
|
|
<view class="ship-section">
|
|
<view class="section-title">基本信息</view>
|
|
<view class="section-row"><text>船舶编号</text><text>ZJ12345</text></view>
|
|
<view class="section-row"><text>船舶名称</text><text>苏航666</text></view>
|
|
<view class="section-row"><text>船舶类型</text><text>货船</text></view>
|
|
<view class="section-row"><text>船籍港</text><text>苏州港</text></view>
|
|
</view>
|
|
<view class="ship-section">
|
|
<view class="section-title">船舶参数</view>
|
|
<view class="section-row"><text>总长度</text><text>45米</text></view>
|
|
<view class="section-row"><text>型宽</text><text>8米</text></view>
|
|
<view class="section-row"><text>型深</text><text>3.5米</text></view>
|
|
<view class="section-row"><text>载重吨</text><text>500吨</text></view>
|
|
</view>
|
|
<view class="ship-section">
|
|
<view class="section-title">证书信息</view>
|
|
<view class="section-row"><text>船检证书</text><text>有效期至2025-12-31</text></view>
|
|
<view class="section-row"><text>营运证书</text><text>有效期至2025-12-31</text></view>
|
|
</view>
|
|
<view class="bottom-add-btn" @click="onAdd">
|
|
<text class="iconfont" style="font-size: 18px;">添加</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import NavBar from '@/components/NavBar.vue'
|
|
export default {
|
|
components: {
|
|
NavBar
|
|
},
|
|
methods: {
|
|
goBack() {
|
|
uni.navigateBack();
|
|
},
|
|
onAdd() {
|
|
uni.showToast({ title: '点击了添加', icon: 'none' });
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.ship-detail-bg {
|
|
min-height: 100vh;
|
|
background: linear-gradient(180deg, #cbe6ff 0%, #f6faff 100%);
|
|
padding-bottom: 32rpx;
|
|
}
|
|
.nav-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 88rpx;
|
|
padding: 0 32rpx;
|
|
background: transparent;
|
|
font-size: 36rpx;
|
|
margin-bottom: 32rpx;
|
|
}
|
|
.iconfont.icon-back {
|
|
font-size: 44rpx;
|
|
color: #222;
|
|
}
|
|
.iconfont.icon-more {
|
|
font-size: 36rpx;
|
|
color: #222;
|
|
}
|
|
.nav-title {
|
|
flex: 1;
|
|
text-align: center;
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #222;
|
|
letter-spacing: 2rpx;
|
|
}
|
|
.ship-section {
|
|
background: #fff;
|
|
border-radius: 24rpx;
|
|
margin: 0 24rpx 32rpx 24rpx;
|
|
box-shadow: 0 4rpx 16rpx rgba(59,124,255,0.08);
|
|
padding: 32rpx 24rpx 8rpx 24rpx;
|
|
margin-top: 20px;
|
|
}
|
|
.section-title {
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
color: #222;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
.section-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 28rpx;
|
|
color: #222;
|
|
padding: 18rpx 0;
|
|
border-bottom: 1rpx solid #f2f4f8;
|
|
}
|
|
.section-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
.bottom-add-btn {
|
|
position: fixed;
|
|
left: 50%;
|
|
bottom: 32px;
|
|
transform: translateX(-50%);
|
|
width: 80vw;
|
|
max-width: 340px;
|
|
height: 48px;
|
|
background: linear-gradient(90deg, #3b7cff 0%, #5bb6ff 100%);
|
|
color: #fff;
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
border-radius: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 4px 16px rgba(59,124,255,0.12);
|
|
z-index: 99;
|
|
}
|
|
</style>
|