@ -0,0 +1,107 @@ |
|||||||
|
<template> |
||||||
|
<swiper class="swiper-block" vertical="true" circular="true" previous-margin="90rpx" next-margin="90rpx" current="0" @change="swiperChange"> |
||||||
|
<block v-for="(item, index) in imgs" :key="index"> |
||||||
|
<swiper-item class="swiper-item" :class="(swiperIndex == index ? 'active' : '')" @tap="previewImg"> |
||||||
|
<view class="item-box" :class="(swiperIndex == index ? 'active' : '')" @click="toDetial(item.id)"> |
||||||
|
<image mode="aspectFill" :src="item.imageInput" class="slide-image"></image> |
||||||
|
<view class="content-box"> |
||||||
|
<view class="title-box">标题标题标题标题标题</view> |
||||||
|
<view class="content acea-row"> |
||||||
|
<view>云快讯</view> |
||||||
|
<view>3小时钱</view> |
||||||
|
<view>300阅读</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</swiper-item> |
||||||
|
</block> |
||||||
|
</swiper> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default{ |
||||||
|
props: { |
||||||
|
imgs: { |
||||||
|
type: Array, |
||||||
|
default: [] |
||||||
|
} |
||||||
|
}, |
||||||
|
data(){ |
||||||
|
return { |
||||||
|
swiperIndex: 0 |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
swiperChange(e) { |
||||||
|
const that = this; |
||||||
|
that.setData({ |
||||||
|
swiperIndex: e.detail.current |
||||||
|
}); |
||||||
|
}, |
||||||
|
toDetial(id){ |
||||||
|
uni.navigateTo({ |
||||||
|
url: '/pages/life/articleDetail/index?id='+id |
||||||
|
}) |
||||||
|
}, |
||||||
|
previewImg() { |
||||||
|
uni.previewImage({ |
||||||
|
urls: this.imgs |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="less"> |
||||||
|
.swiper-block { |
||||||
|
width: 670rpx; |
||||||
|
height: 300rpx; |
||||||
|
margin: 0 auto; |
||||||
|
} |
||||||
|
|
||||||
|
.swiper-item { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
overflow: unset; |
||||||
|
} |
||||||
|
.item-box{ |
||||||
|
width: 622rpx; |
||||||
|
height: 200rpx; |
||||||
|
position: relative; |
||||||
|
border-radius: 20rpx; |
||||||
|
} |
||||||
|
.slide-image { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
z-index: 1; |
||||||
|
border-radius: 20rpx; |
||||||
|
} |
||||||
|
.content-box{ |
||||||
|
position: absolute; |
||||||
|
bottom: 20rpx; |
||||||
|
left: 20rpx; |
||||||
|
color: #0081FF; |
||||||
|
z-index: 5; |
||||||
|
} |
||||||
|
.title-box{ |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: 500; |
||||||
|
color: #fff; |
||||||
|
margin-bottom: 10rpx; |
||||||
|
} |
||||||
|
.content{ |
||||||
|
color: #fff; |
||||||
|
font-size: 26rpx; |
||||||
|
} |
||||||
|
.content view{ |
||||||
|
margin-right: 50rpx; |
||||||
|
} |
||||||
|
.active { |
||||||
|
transform: scale(1.02); |
||||||
|
transition: all 0.2s ease-in 0s; |
||||||
|
border-radius: 20rpx; |
||||||
|
z-index: 20; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,49 @@ |
|||||||
|
|
||||||
|
<template> |
||||||
|
<view class="article-box"> |
||||||
|
<view class="headline">楚牛电商一季度卖了300亿，原因竟是这？</view> |
||||||
|
<view class=""> |
||||||
|
<image src="../../../static/images/cart.png" mode=""></image> |
||||||
|
<view class="">云快讯</view> |
||||||
|
<view class="">203 </view> |
||||||
|
<view>3小时前</view> |
||||||
|
</view> |
||||||
|
<view class="statement">转载声明：本文由云快讯收录，观点仅代表作者本人。不代表云快讯立场，云快讯不对所包含的准确性，可靠性或完整性提供任何明示，请自行承担任何责任。</view> |
||||||
|
<image src="../../../static/images/gd1.png" mode="" class="article-bg1"></image> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { getCategory , getProducts, getArticle} from "@/api/store"; |
||||||
|
export default{ |
||||||
|
data() { |
||||||
|
return{ |
||||||
|
id:this.id, |
||||||
|
} |
||||||
|
}, |
||||||
|
methods:{ |
||||||
|
}, |
||||||
|
onLoad: function (option) { |
||||||
|
this.id= this.$yroute.query.id; |
||||||
|
console.log(this.id) |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="less"> |
||||||
|
.article-box{ |
||||||
|
width: 100%; |
||||||
|
min-height: 100vh; |
||||||
|
background: #F5F6F7; |
||||||
|
padding: 0 40rpx; |
||||||
|
} |
||||||
|
.headline{ |
||||||
|
font-size: 32rpx; |
||||||
|
color: #333333; |
||||||
|
padding-top: 30rpx; |
||||||
|
margin-bottom: 60rpx; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,68 @@ |
|||||||
|
{ |
||||||
|
"description": "项目配置文件", |
||||||
|
"packOptions": { |
||||||
|
"ignore": [] |
||||||
|
}, |
||||||
|
"setting": { |
||||||
|
"bundle": false, |
||||||
|
"userConfirmedBundleSwitch": false, |
||||||
|
"urlCheck": true, |
||||||
|
"scopeDataCheck": false, |
||||||
|
"coverView": true, |
||||||
|
"es6": true, |
||||||
|
"postcss": true, |
||||||
|
"compileHotReLoad": false, |
||||||
|
"lazyloadPlaceholderEnable": false, |
||||||
|
"preloadBackgroundData": false, |
||||||
|
"minified": true, |
||||||
|
"autoAudits": false, |
||||||
|
"newFeature": false, |
||||||
|
"uglifyFileName": false, |
||||||
|
"uploadWithSourceMap": true, |
||||||
|
"useIsolateContext": true, |
||||||
|
"nodeModules": false, |
||||||
|
"enhance": true, |
||||||
|
"useMultiFrameRuntime": true, |
||||||
|
"useApiHook": true, |
||||||
|
"useApiHostProcess": true, |
||||||
|
"showShadowRootInWxmlPanel": true, |
||||||
|
"packNpmManually": false, |
||||||
|
"enableEngineNative": false, |
||||||
|
"packNpmRelationList": [], |
||||||
|
"minifyWXSS": true, |
||||||
|
"showES6CompileOption": false |
||||||
|
}, |
||||||
|
"compileType": "miniprogram", |
||||||
|
"libVersion": "2.21.0", |
||||||
|
"appid": "wx1bdc220038c3cb61", |
||||||
|
"projectname": "miniprogram-1", |
||||||
|
"debugOptions": { |
||||||
|
"hidedInDevtools": [] |
||||||
|
}, |
||||||
|
"scripts": {}, |
||||||
|
"staticServerOptions": { |
||||||
|
"baseURL": "", |
||||||
|
"servePath": "" |
||||||
|
}, |
||||||
|
"isGameTourist": false, |
||||||
|
"condition": { |
||||||
|
"search": { |
||||||
|
"list": [] |
||||||
|
}, |
||||||
|
"conversation": { |
||||||
|
"list": [] |
||||||
|
}, |
||||||
|
"game": { |
||||||
|
"list": [] |
||||||
|
}, |
||||||
|
"plugin": { |
||||||
|
"list": [] |
||||||
|
}, |
||||||
|
"gamePlugin": { |
||||||
|
"list": [] |
||||||
|
}, |
||||||
|
"miniprogram": { |
||||||
|
"list": [] |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 921 B |
|
After Width: | Height: | Size: 357 B |
|
After Width: | Height: | Size: 195 KiB |
|
After Width: | Height: | Size: 304 KiB |
|
After Width: | Height: | Size: 133 KiB |
|
After Width: | Height: | Size: 377 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 79 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 3.1 KiB |