Compare commits
10 Commits
8d0f7220d9
...
67859c569f
| Author | SHA1 | Date |
|---|---|---|
dongmu
|
67859c569f | 1 year ago |
|
dongmu
|
3ee987f1f9 | 1 year ago |
|
dongmu
|
6da146785a | 1 year ago |
|
dongmu
|
d859691873 | 1 year ago |
|
dongmu
|
be12953e05 | 1 year ago |
|
dongmu
|
ee9b78f42d | 1 year ago |
|
dongmu
|
3e012d89f8 | 1 year ago |
|
dongmu
|
2f6fed858a | 1 year ago |
苏杰豪
|
a0933c6d1d | 1 year ago |
|
苏杰豪
|
c84c34e3df | 1 year ago |
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,77 @@
|
||||
<script setup lang="ts">
|
||||
import type { BannerItem } from '@/types/home'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const activeIndex = ref(0)
|
||||
|
||||
const onchange: UniHelper.SwiperOnChange = (ev) => {
|
||||
// 排除空值 类型断言
|
||||
activeIndex.value = ev.detail!.current
|
||||
}
|
||||
|
||||
// 接收父组件 传过来的数据 props --- 指定泛型(一个尖括号一个花括号)
|
||||
defineProps<{
|
||||
list: BannerItem[]
|
||||
}>()
|
||||
|
||||
// const props = defineProps<{
|
||||
// list: BannerItem[]
|
||||
// }>()
|
||||
|
||||
// console.log(props, 'props')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="carousel">
|
||||
<swiper @change="onchange" :circular="true" :autoplay="false" :interval="3000">
|
||||
<swiper-item v-for="item in list" :key="item.id">
|
||||
<navigator url="/pages/index/index" hover-class="none" class="navigator">
|
||||
<image mode="aspectFill" class="image" :src="item.imgUrl"></image>
|
||||
</navigator>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<!-- 指示点 -->
|
||||
<view class="indicator">
|
||||
<text
|
||||
v-for="(item, index) in list.length"
|
||||
:key="item"
|
||||
class="dot"
|
||||
:class="{ active: index === activeIndex }"
|
||||
></text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
/* 轮播图 */
|
||||
.carousel {
|
||||
height: 280rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transform: translateY(0);
|
||||
background-color: #efefef;
|
||||
.indicator {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 16rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.dot {
|
||||
width: 30rpx;
|
||||
height: 6rpx;
|
||||
margin: 0 8rpx;
|
||||
border-radius: 6rpx;
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
.active {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
.navigator,
|
||||
.image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,8 @@
|
||||
export const environment = {
|
||||
ENV: 'development',
|
||||
APP_TITLE: '鸿森通货运平台',
|
||||
APP_TARGET: 'http://192.168.0.166',
|
||||
APP_PORT: ':8080',
|
||||
APP_FILE_URL: 'http://106.58.179.30:19005/',
|
||||
ENCRYPT: '',
|
||||
}
|
||||
@ -0,0 +1,8 @@
|
||||
export const environment = {
|
||||
ENV: 'production',
|
||||
APP_TITLE: '鸿森通货运平台',
|
||||
APP_TARGET: 'https://hongsentong.com',
|
||||
APP_PORT: '',
|
||||
APP_FILE_URL: 'https://hongsentong.com/minio/',
|
||||
ENCRYPT: 'encrypt',
|
||||
}
|
||||
@ -0,0 +1,8 @@
|
||||
export const environment = {
|
||||
ENV: 'test',
|
||||
APP_TITLE: '鸿森通货运平台',
|
||||
APP_TARGET: 'http://112.112.149.146/',
|
||||
APP_PORT: '18010',
|
||||
APP_FILE_URL: 'http://112.112.149.146:19005/',
|
||||
ENCRYPT: true,
|
||||
}
|
||||
@ -0,0 +1,73 @@
|
||||
<script setup lang="ts">
|
||||
// 获取屏幕边界到安全区域距离
|
||||
const { safeAreaInsets } = uni.getSystemInfoSync()
|
||||
console.log(safeAreaInsets, '安全区域')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
|
||||
<!-- logo文字 -->
|
||||
<view class="logo">
|
||||
<image class="logo-image" src="@/static/images/logo.png"></image>
|
||||
<text class="logo-text">新鲜 · 亲民 · 快捷</text>
|
||||
</view>
|
||||
<!-- 搜索条 -->
|
||||
<view class="search">
|
||||
<text class="icon-search">搜索商品</text>
|
||||
<text class="icon-scan"></text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
/* 自定义导航条 */
|
||||
.navbar {
|
||||
background-image: url(@/static/images/navigator_bg.png);
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: 20px;
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 64rpx;
|
||||
padding-left: 30rpx;
|
||||
padding-top: 20rpx;
|
||||
.logo-image {
|
||||
width: 166rpx;
|
||||
height: 39rpx;
|
||||
}
|
||||
.logo-text {
|
||||
flex: 1;
|
||||
line-height: 28rpx;
|
||||
color: #fff;
|
||||
margin: 2rpx 0 0 20rpx;
|
||||
padding-left: 20rpx;
|
||||
border-left: 1rpx solid #fff;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
.search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 10rpx 0 26rpx;
|
||||
height: 64rpx;
|
||||
margin: 16rpx 20rpx;
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
border-radius: 32rpx;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.icon-search {
|
||||
&::before {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
.icon-scan {
|
||||
font-size: 30rpx;
|
||||
padding: 15rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,11 @@
|
||||
/** 首页-广告区域数据类型 */
|
||||
export type BannerItem = {
|
||||
/** 跳转链接 */
|
||||
hrefUrl: string
|
||||
/** id */
|
||||
id: string
|
||||
/** 图片链接 */
|
||||
imgUrl: string
|
||||
/** 跳转类型 */
|
||||
type: number
|
||||
}
|
||||
@ -0,0 +1,5 @@
|
||||
import { environment } from '@/env/development'
|
||||
// import { environment } from '@/env/production'
|
||||
// import { environment } from '@/env/test'
|
||||
|
||||
export const ENV = environment
|
||||
Loading…
Reference in new issue