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.
318 lines
8.6 KiB
318 lines
8.6 KiB
<template>
|
|
<View title="热门电影" sub-title="Popular Movies">
|
|
<div class="content">
|
|
<div class="movie-left">
|
|
<div class="carousel">
|
|
<EffectFade :list="banner">
|
|
<template v-slot="{ item }">
|
|
<div class="banner-wrapper">
|
|
<img :src="config.sourceUrl + item" class="banner" alt="" />
|
|
</div>
|
|
</template>
|
|
</EffectFade>
|
|
</div>
|
|
|
|
<div class="top-right">
|
|
<div class="go">
|
|
<img src="../../assets/images/fly.png" class="fly" alt="" />
|
|
<div class="text-wrapper">
|
|
<p class="en">GO HERE！</p>
|
|
<p class="text">去这里!</p>
|
|
</div>
|
|
</div>
|
|
<h1 class="title">{{ switchLanguage(cinema, 'shopName') }}</h1>
|
|
</div>
|
|
</div>
|
|
<ScrollView class="intro-scroll" scrollbar :list="cinema.content">
|
|
<p class="intro">
|
|
欧时力(香港)集团全权代理意大利品牌欧时力(OCHIRLY)，并组建欧时力(中国)有限公司，全权负责OCHIRLY在大中华区的品牌经营。欧时力自1999年进入中国市场以来，欧时力以前所未有的速度在中国市场发展壮大。在短短的两、三年间，迅速于中国60多个一、二类主要消费城市的160余家加盟店以及专柜年销售额达到2.5亿。销售业绩评效均名列前茅，整体业绩不断上扬！在女装市场享有一定的知名度和美誉度。欧时力(香港)集团全权代理意大利品牌欧时力(OCHIRLY)，并组建欧时力(中国)有限公司，全权负责OCHIRLY在大中华区的品牌经营。欧时力自1999年进入中国市场以来，欧时力以前所未有的速度在中国市场发展壮大。在短短的两、三年间，迅速于中国60多个一、二类主要消费城市的160余家加盟店以及专柜年销售额达到2.5亿在短短的两、三年间，迅速于中国60多个一、二类主要消费城市的160余家加盟店以及专柜年销售额达到2.5亿在短短的两、三年间，迅速于中
|
|
</p>
|
|
</ScrollView>
|
|
<ScrollView class="movie-scroll">
|
|
<TransitionGroup tag="div" name="zoom" class="scroll-content">
|
|
<div class="movie-item" v-for="item of list" @click="handleMovie(item)" :key="item.id">
|
|
<div class="poster-wrapper">
|
|
<img class="poster" :src="item.posterPath" alt="" />
|
|
</div>
|
|
<p class="name">{{ item.showName }}</p>
|
|
<div class="info">{{ item.duration }}{{ $t('fenzhong') }} | {{ item.type }} | {{ item.language }} | {{ item.director }}</div>
|
|
<div class="remark">
|
|
<span>{{ $t('rate') }}</span>
|
|
{{ item.remark }}
|
|
</div>
|
|
<div class="price">
|
|
<div class="price-num">¥<i>36</i>起</div>
|
|
<div class="buy">{{ $t('ticket') }}</div>
|
|
</div>
|
|
</div>
|
|
</TransitionGroup>
|
|
</ScrollView>
|
|
</div>
|
|
</View>
|
|
<Transition enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut">
|
|
<MovieDetail :movie="movie" @close="showDetail = false" v-if="showDetail" />
|
|
</Transition>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, ref } from 'vue'
|
|
import { storeToRefs } from 'pinia'
|
|
import { useStore } from '@/store/root'
|
|
import { list } from './mock'
|
|
import { getCinemaInfo } from '@/http/api'
|
|
import View from '@/layouts/View.vue'
|
|
import EffectFade from '@/components/EffectFade/EffectFade.vue'
|
|
import ScrollView from '@/base/ScrollView/ScrollView.vue'
|
|
import MovieDetail from '@/components/MovieDetail/MovieDetail.vue'
|
|
|
|
const store = useStore()
|
|
const { config, shopList } = storeToRefs(store)
|
|
|
|
const cinema = ref({})
|
|
const banner = computed(() => cinema.value?.doorMaterialList ?? [])
|
|
getCinemaInfo(({ data }) => {
|
|
const { cinemaCode = '' } = data
|
|
cinema.value = shopList.value.find(item => item.shopId === cinemaCode) ?? {}
|
|
})
|
|
|
|
const showDetail = ref(false)
|
|
const movie = ref({})
|
|
function handleMovie(item) {
|
|
movie.value = item
|
|
showDetail.value = true
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
width: 870px;
|
|
height: 1504px;
|
|
margin-left: 170px;
|
|
margin-top: 58px;
|
|
background: rgba(255, 255, 255, 0.4);
|
|
border-radius: 12px;
|
|
}
|
|
.flex {
|
|
display: flex;
|
|
}
|
|
.movie-left {
|
|
display: flex;
|
|
position: relative;
|
|
border-radius: 12px;
|
|
margin-bottom: 32px;
|
|
.go {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
width: 282px;
|
|
height: 80px;
|
|
background: linear-gradient(90deg, #f6a62c 0%, #ffbc3f 100%);
|
|
font-weight: 700;
|
|
font-family: 'font_bold';
|
|
color: #ffffff;
|
|
margin-top: 32px;
|
|
border-radius: 53px;
|
|
&::before {
|
|
position: absolute;
|
|
content: '';
|
|
top: 25px;
|
|
left: 105px;
|
|
width: 1px;
|
|
height: 30px;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
}
|
|
.fly {
|
|
width: 40px;
|
|
margin: 0 40px;
|
|
}
|
|
.en {
|
|
font-size: 20px;
|
|
}
|
|
.text {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
:deep(.swiper) {
|
|
overflow: visible !important;
|
|
z-index: auto;
|
|
}
|
|
:deep(.swiper-pagination) {
|
|
right: 32px;
|
|
left: auto;
|
|
bottom: -15px;
|
|
width: auto;
|
|
}
|
|
:deep(.swiper-pagination-bullet) {
|
|
width: 16px !important;
|
|
height: 3px !important;
|
|
background: rgba(0, 0, 0, 0.1);
|
|
border-radius: 3px !important;
|
|
opacity: inherit !important;
|
|
&.swiper-pagination-bullet-active {
|
|
background: #f1b33e;
|
|
border-radius: 3px !important;
|
|
}
|
|
}
|
|
.carousel {
|
|
flex-shrink: 0;
|
|
position: relative;
|
|
display: inline-block;
|
|
margin-left: 40px;
|
|
margin-right: 24px;
|
|
width: 500px;
|
|
height: 282px;
|
|
margin-top: -40px;
|
|
background-color: #fff;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
:deep(.stay-tuned) {
|
|
height: 200px;
|
|
}
|
|
}
|
|
.banner-wrapper {
|
|
width: 500px;
|
|
height: 282px;
|
|
overflow: hidden;
|
|
border-radius: 8px;
|
|
background: #ffffff;
|
|
.banner {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
|
|
.title {
|
|
font-weight: 700;
|
|
font-size: 24px;
|
|
color: rgba(0, 0, 0, 0.8);
|
|
font-family: 'font_bold';
|
|
padding-top: 102px;
|
|
text-align: right;
|
|
padding-right: 40px;
|
|
}
|
|
}
|
|
.intro-scroll {
|
|
position: relative;
|
|
margin: 0 18px 52px 40px;
|
|
padding-right: 16px;
|
|
overflow: hidden;
|
|
height: 131px;
|
|
z-index: 1;
|
|
:deep(.bscroll-vertical-scrollbar) {
|
|
width: 6px !important;
|
|
background: rgba(0, 0, 0, 0.02) !important;
|
|
border-radius: 6px !important;
|
|
opacity: 1 !important;
|
|
.bscroll-indicator {
|
|
width: 6px !important;
|
|
background: rgba(0, 0, 0, 0.1) !important;
|
|
border-radius: 6px !important;
|
|
border: none !important;
|
|
}
|
|
}
|
|
.intro {
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
line-height: 200%;
|
|
text-align: justify;
|
|
color: rgba(0, 0, 0, 0.6);
|
|
}
|
|
}
|
|
.movie-scroll {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
border-radius: 12px 0 0 12px;
|
|
margin-left: 40px;
|
|
height: 1103px;
|
|
|
|
.scroll-content {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 260px);
|
|
gap: 36px 8px;
|
|
padding-bottom: 36px;
|
|
}
|
|
|
|
.movie-item {
|
|
width: 260px;
|
|
height: 600px;
|
|
background: #ffffff;
|
|
border-radius: 12px;
|
|
padding: 4px;
|
|
margin-right: 24px;
|
|
}
|
|
.poster-wrapper {
|
|
width: 252px;
|
|
height: 380px;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
margin-bottom: 24px;
|
|
.poster {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
.name {
|
|
font-weight: 700;
|
|
font-size: 20px;
|
|
color: rgba(0, 0, 0, 0.8);
|
|
@include no-wrap;
|
|
padding-bottom: 20px;
|
|
padding-left: 24px;
|
|
}
|
|
.info {
|
|
height: 28px;
|
|
font-weight: 400;
|
|
font-size: 12px;
|
|
line-height: 14px;
|
|
color: rgba(0, 0, 0, 0.4);
|
|
@include more-wrap;
|
|
padding-left: 24px;
|
|
padding-right: 24px;
|
|
margin-bottom: 14px;
|
|
white-space: normal;
|
|
}
|
|
.remark {
|
|
font-weight: 700;
|
|
color: rgba(0, 0, 0, 0.6);
|
|
padding-bottom: 10px;
|
|
margin-left: 24px;
|
|
margin-right: 24px;
|
|
margin-bottom: 16px;
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.02);
|
|
|
|
span {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
.price {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding-left: 24px;
|
|
padding-right: 24px;
|
|
color: #f1b33e;
|
|
font-weight: 700;
|
|
font-family: 'font_bold';
|
|
.price-num {
|
|
font-size: 16px;
|
|
i {
|
|
font-size: 32px;
|
|
padding: 0 4px;
|
|
}
|
|
}
|
|
}
|
|
.buy {
|
|
width: 98px;
|
|
height: 38px;
|
|
background: linear-gradient(90deg, #f6a62c 0%, #ffbc3f 100%);
|
|
border-radius: 8px;
|
|
line-height: 38px;
|
|
text-align: center;
|
|
font-weight: 700;
|
|
font-size: 14px;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
</style>
|
|
|