|
|
- <template>
- <!-- 非遗体验 -->
- <view class="experience">
- <navbar title="非遗体验" leftClick @leftClick="$utils.navigateBack" />
- <view class="experience-img">
- <image src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1msKSi.img" mode="aspectFill" />
- </view>
- <view class="experience-box" v-for="(item,index) in 10"
- @click="toUrl(item)"
- :key="index">
- <view class="experience-box-img">
- <uv-image src="https://cdn.uviewui.com/uview/album/1.jpg" radius="16rpx" width="100%" height="360rpx"
- :fade="false" />
- </view>
-
- <view class="experience-box-font">
- <view style="font-weight: 600;">孙天天陶瓷工作室</view>
- <view style="font-size: 24rpx; color: #999999;">开放时间:08:00-21:00</view>
- <view class="experience-box-button">
- <view>线上预订</view>
- </view>
- </view>
- </view>
-
- <tabber/>
- </view>
- </template>
-
- <script>
- export default {
- data() {
- return {
-
- }
- },
- methods: {
- toUrl(item){
- console.log(item);
- this.$utils.navigateTo(`/pages_order/service/articleDetail?id=${item.id}&type=2`)
- },
- }
- }
- </script>
-
- <style scoped lang="scss">
- .experience {
- .experience-img {
- height: 400rpx;
-
- image {
- height: 100%;
- width: 100%;
- }
- }
-
- .experience-box {
- width: 94%;
- margin-left: 3%;
- margin-top: 20rpx;
- background-color: #fff;
- box-shadow: 0px 0px 10rpx 0rpx #00000022;
- border-radius: 12rpx;
-
- .experience-box-img {
- width: 94%;
- margin-left: 3%;
- padding-top: 20rpx;
- }
-
- .experience-box-font {
- width: 94%;
- margin-left: 3%;
- margin-top: 30rpx;
-
- .experience-box-button {
- display: flex;
- justify-content: flex-end;
- align-items: center;
- font-size: 28rpx;
- color: #fff;
- padding-bottom: 40rpx;
-
- view {
- padding: 10rpx 40rpx;
- border-radius: 40rpx;
- background-color: #C83741;
- }
- }
- }
- }
- }
- </style>
|