143 lines
3.4 KiB
Vue
143 lines
3.4 KiB
Vue
|
<template>
|
||
|
|
<view class="content">
|
||
|
|
<view class="details-head">
|
||
|
|
<view class="swiper-head">
|
||
|
|
<swiper class="swiper" @change="changeAutoplay" :autoplay="autoplay" :interval="interval"
|
||
|
|
:duration="duration">
|
||
|
|
<swiper-item>
|
||
|
|
<view class="swiper-item uni-bg-red">
|
||
|
|
<image class="img" src="../../static/del/项目图片.png" mode="aspectFill"></image>
|
||
|
|
</view>
|
||
|
|
</swiper-item>
|
||
|
|
<swiper-item>
|
||
|
|
<view class="swiper-item uni-bg-red">
|
||
|
|
<image class="img" src="../../static/del/项目图片.png" mode="aspectFill"></image>
|
||
|
|
</view>
|
||
|
|
</swiper-item>
|
||
|
|
<swiper-item>
|
||
|
|
<view class="swiper-item uni-bg-red">
|
||
|
|
<image class="img" src="../../static/del/项目图片.png" mode="aspectFill"></image>
|
||
|
|
</view>
|
||
|
|
</swiper-item>
|
||
|
|
</swiper>
|
||
|
|
|
||
|
|
<view class="indication-point ">
|
||
|
|
{{index}}/3
|
||
|
|
</view>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
|
||
|
|
|
||
|
|
<view class="title">
|
||
|
|
湖南工业大学生化学院会议室P2.5全彩LED显示屏
|
||
|
|
</view>
|
||
|
|
<view class="code">
|
||
|
|
XM20220108-1001
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="address">
|
||
|
|
<image class="img" src="../../static/iocn/im.png" mode=""></image>
|
||
|
|
<view class="text">
|
||
|
|
湖南省长沙市高新开发区谷园路109号像素大厦1205
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
<view class="last-date">
|
||
|
|
|
||
|
|
</view>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
autoplay: true,
|
||
|
|
interval: 3000,
|
||
|
|
index: 1,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
changeAutoplay(data) {
|
||
|
|
console.log()
|
||
|
|
this.index = data.detail.current - 0 + 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
page {
|
||
|
|
background-color: #F7F7F7;
|
||
|
|
}
|
||
|
|
|
||
|
|
.content {
|
||
|
|
padding: 16rpx 13rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.swiper {
|
||
|
|
width: 100%;
|
||
|
|
height: 500rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.swiper .img {
|
||
|
|
height: 500rpx;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.details-head {
|
||
|
|
width: 100%;
|
||
|
|
padding: 24rpx 12rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
height: 682rpx;
|
||
|
|
background-color: #FFFFFF;
|
||
|
|
border-radius: 20rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.swiper-head {
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.indication-point {
|
||
|
|
width: 102rpx;
|
||
|
|
height: 46rpx;
|
||
|
|
border-radius: 26rpx 0 0 0;
|
||
|
|
right: 0px;
|
||
|
|
bottom: 0rpx;
|
||
|
|
text-align: center;
|
||
|
|
color: #fff;
|
||
|
|
position: absolute;
|
||
|
|
background-color: #e64545;
|
||
|
|
}
|
||
|
|
|
||
|
|
.details-head .title {
|
||
|
|
font-size: 28rpx;
|
||
|
|
padding: 13rpx 0rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.details-head .code {
|
||
|
|
font-size: 24rpx;
|
||
|
|
padding: 0rpx 0rpx 13rpx 0rpx;
|
||
|
|
color: #ff8800;
|
||
|
|
}
|
||
|
|
|
||
|
|
.address {
|
||
|
|
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.address .img {
|
||
|
|
width: 18rpx;
|
||
|
|
margin-right: 14rpx;
|
||
|
|
height: 24rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.address .text {
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: #666666;
|
||
|
|
}
|
||
|
|
</style>
|