138 lines
3.0 KiB
Vue
138 lines
3.0 KiB
Vue
<template>
|
|
<view class="container">
|
|
<NavBar title="选择机票" bgColor="#F0F4F9" isBack></NavBar>
|
|
|
|
<view class="content">
|
|
<view class="app-card" v-for="(item, index) in appList" :key="index" @click="handleItemClick(item)">
|
|
<!-- Background Watermark -->
|
|
<image class="watermark" :src="item.bgImage" mode="heightFix"></image>
|
|
|
|
<!-- Front Content -->
|
|
<view class="card-left">
|
|
<view class="logo-box">
|
|
<image class="logo" :src="item.logo" mode="aspectFit"></image>
|
|
<!-- Hot Tag for Fliggy -->
|
|
<view v-if="item.isHot" class="hot-tag">
|
|
<image style="width: 72rpx;height:32rpx" src="/static/image/index/hot-icon.png"
|
|
mode="aspectFit"></image>
|
|
</view>
|
|
</view>
|
|
<text class="app-name">{{ item.name }}</text>
|
|
</view>
|
|
|
|
<uni-icons type="right" size="18" color="#CCCCCC"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import NavBar from '@/components/nav-bar/nav-bar.vue';
|
|
import { reactive, toRefs } from 'vue';
|
|
import { util } from '@/utils/common.js'; // Assuming util exists for navigation, similar to previous tasks
|
|
|
|
const appList = [
|
|
{
|
|
name: '去哪儿APP',
|
|
logo: '/static/image/other/tickets-app/qvnar-logo.png',
|
|
bgImage: '/static/image/other/tickets-app/qvnar-bg.png',
|
|
path: '/pages/other/air-tickets/qunar-air-tickets/qunar-air-tickets',
|
|
isHot: false
|
|
},
|
|
{
|
|
name: '飞猪APP',
|
|
logo: '/static/image/other/tickets-app/fliggy-logo.png',
|
|
bgImage: '/static/image/other/tickets-app/fliggy-bg.png',
|
|
path: '',
|
|
isHot: true
|
|
},
|
|
{
|
|
name: '携程APP',
|
|
logo: '/static/image/other/tickets-app/trip-com-logo.png',
|
|
bgImage: '/static/image/other/tickets-app/trip-com-bg.png',
|
|
path: '',
|
|
isHot: false
|
|
},
|
|
// {
|
|
// name: '铁路12306',
|
|
// logo: '/static/image/other/tickets-app/12306-logo.png',
|
|
// bgImage: '/static/image/other/tickets-app/12306-bg.png',
|
|
// path: '/pages/other/train-tickets/12306-tickets/12306-tickets',
|
|
// isHot: false
|
|
// }
|
|
]
|
|
|
|
const handleItemClick = (item) => {
|
|
if (item.path) {
|
|
util.goPage(item.path)
|
|
} else {
|
|
uni.showToast({
|
|
title: '开发中',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
}
|
|
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.container {
|
|
min-height: 100vh;
|
|
background-color: #F0F4F9;
|
|
}
|
|
|
|
.content {
|
|
padding: 24rpx;
|
|
}
|
|
|
|
.app-card {
|
|
position: relative;
|
|
background-color: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
height: 188rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 24rpx 0 32rpx;
|
|
margin-bottom: 24rpx;
|
|
overflow: hidden;
|
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.02);
|
|
|
|
.watermark {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
height: 80%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.card-left {
|
|
display: flex;
|
|
align-items: center;
|
|
z-index: 1;
|
|
|
|
.logo-box {
|
|
position: relative;
|
|
margin-right: 28rpx;
|
|
|
|
.logo {
|
|
width: 108rpx;
|
|
height: 108rpx;
|
|
border-radius: 16rpx;
|
|
display: block; // Remove extra space
|
|
}
|
|
|
|
.hot-tag {
|
|
position: absolute;
|
|
top: -12rpx;
|
|
right: -30rpx;
|
|
}
|
|
}
|
|
|
|
.app-name {
|
|
font-size: 36rpx;
|
|
color: #3D3D3D;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
}
|
|
</style> |