Browse Source

add style

dev
刘嘉炜 1 week ago
parent
commit
3b08a7065f
  1. 63
      src/components/tab_bar.vue
  2. 2
      src/manifest.json
  3. 23
      src/pages.json
  4. 50
      src/pages/index/index.vue
  5. 292
      src/pages/order/detail.vue
  6. 111
      src/pages/order/list.vue
  7. 31
      src/pages/order/modules/text_line.vue
  8. 18
      src/pages/tem.vue
  9. BIN
      src/static/images/douyin_logo.png
  10. 16
      src/styles/iconfonts.scss
  11. 2
      src/uni.scss
  12. 1
      vite.config.js

63
src/components/tab_bar.vue

@ -0,0 +1,63 @@
<script setup>
import { reactive, ref } from "vue";
const tabIdx = ref(0);
</script>
<template>
<view class="tab-bar">
<view class="tb-item" :class="{'tb-active': tabIdx === 0}" @click="tabIdx = 0">
<view class="ti-txt">889</view>
</view>
<view class="tb-item" :class="{'tb-active': tabIdx === 1}" @click="tabIdx = 1">
<view class="ti-txt">889</view>
</view>
<view class="tb-item" :class="{'tb-active': tabIdx === 2}" @click="tabIdx = 2">
<view class="ti-txt">889</view>
</view>
</view>
</template>
<style lang="scss" scoped>
.tab-bar{
padding: 2upx 0;
background-color: #fff;
@include ctf(space-between);
.tb-item{
position: relative;
flex-shrink: 0;
flex-grow: 1;
text-align: center;
.ti-txt{
position: relative;
display: inline-block;
@include flcw(32upx, 92upx, #9A9A9D, 500);
&::after{
content: '';
transition: all .2s;
position: absolute;
left: 50%;
bottom: -2upx;
transform: translateX(-50%) translateY(50%);
display: block;
width: 70%;
height: 10upx;
border-radius: 5upx;
background-color: $mColor;
opacity: 0;
}
}
&.tb-active{
.ti-txt{
color: $mColor;
&::after{
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}
}
}
}
</style>

2
src/manifest.json

@ -1,5 +1,5 @@
{
"name" : "app",
"name" : "uni_cli_dy_verify",
"appid" : "",
"description" : "",
"versionName" : "1.0.0",

23
src/pages.json

@ -3,14 +3,27 @@
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
"navigationBarTitleText": "欧轩智能场馆"
}
},
{
"path": "pages/order/list",
"style": {
"navigationBarTitleText": "订单列表"
}
},
{
"path": "pages/order/detail",
"style": {
"navigationBarTitleText": "订单详情"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
"navigationBarTextStyle": "#FFFFFF",
"navigationBarTitleText": "欧轩智能场馆",
"navigationBarBackgroundColor": "#009874",
"backgroundColor": "#F2F2F7"
}
}

50
src/pages/index/index.vue

@ -16,16 +16,56 @@ onLoad(() => {
</script>
<template>
<view class="index-index">hello &#xe605;</view>
<view class="index-index">
<swiper class="ii-swiper" indicator-color="rgba(255, 255, 255, .72)" indicator-active-color="#009874" indicator-dots autoplay >
<swiper-item>
<image class="is-img"></image>
</swiper-item>
</swiper>
<view class="ii-line-btn">
<image class="ilb-dy-icon" src="/static/images/douyin_logo.png"></image>
<view class="ilb-txt">抖音快捷验券</view>
<text class="ilb-arrow">&#xe660;</text>
</view>
</view>
</template>
<style lang="scss" scoped>
@font-face{
@include circleSuccess;
@include doubleRightArrow;
}
.index-index{
text-align: center;
@include flcw(28upx, 32upx, $mColor, 500);
font-family: circleSuccess;
.ii-swiper{
height: 340upx;
.is-img{
width: 100%;
height: 100%;
background: skyblue;
}
}
.ii-line-btn{
margin: 42upx auto 0;
padding-left: 90upx;
padding-right: 60upx;
width: 702upx;
height: 100upx;
border-radius: 50upx;
background-color: $mColor;
@include ctf(space-between);
.ilb-txt{
@include flcw(36upx, 50upx, #fff, 500);
}
.ilb-dy-icon{
flex-shrink: 0;
width: 64upx;
height: 64upx;
}
.ilb-arrow{
flex-shrink: 0;
font-family: doubleRightArrow;
font-size: 52upx;
color: #fff;
}
}
}
</style>

292
src/pages/order/detail.vue

@ -0,0 +1,292 @@
<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { reactive, ref } from "vue";
import textLine from "./modules/text_line.vue";
const isShowSpecificTime = ref(false);
onLoad(() => {
});
</script>
<template>
<view class="order-detail">
<view class="od-box od-header">
<view class="oh-stadium">
<image class="os-logo"></image>
<view class="os-name">MJ体育(天空篮球从云店)</view>
<view class="os-status">已核销</view>
</view>
<view class="oh-line">订单编号123456789012</view>
<view class="oh-line">创建时间2019-06-06 12:00:06</view>
</view>
<!-- 场次信息 -->
<view class="od-box od-venue-info">
<view class="od-title">场次信息</view>
<text-line label="预定项目:">羽毛球</text-line>
<text-line label="预定日期:">2019年05月17日(周五)</text-line>
<view class="soi-booking-info">
<view class="sbi-name">预定场次</view>
<view class="sbi-time-range">
<block v-for="(e, i) in 3" :key=i>
<view class="str-item">{{ e.name || '几号馆' }} {{ e.time || '时间段' }}</view>
</block>
</view>
</view>
<view class="vmm-line" v-if='isShowSpecificTime'>
<view>具体场次</view>
<view>
<view v-for="(e,i) in 3" :key="i">{{ 'venue_name' }} {{ 'duration' }} ({{ 0 }})</view>
</view>
</view>
<view class="soi-fold-btn" @click="isShowSpecificTime = !isShowSpecificTime">
<view class="sfb-txt">{{ isShowSpecificTime ? '收起' : '查看具体场次' }}</view>
<text class="sfb-icon" :class="[ isShowSpecificTime ? 'rotate' :'' ]">&#xe695;</text>
</view>
<view class="vvm-total">
<view>小计{{0}}</view>
<view>{{ 0}}</view>
</view>
</view>
<!-- 二维码 -->
<view class="od-box od-code">
<image class="oc-code-img"></image>
<view class="oc-tip">点击二维码可放大查看</view>
</view>
<!-- 支付信息 -->
<view class="od-box od-payment">
<view class="od-title">支付信息</view>
<text-line label="支付方式:">抖音支付</text-line>
<text-line label="支付时间:">2019年6月18日 10:30:40</text-line>
<text-line label="交易号:">3532463457445848657</text-line>
</view>
<!-- 抖音商品信息 -->
<view class="od-box od-goods">
<view class="og-title">抖音商品信息</view>
<view class="og-info">
<image class="oi-pic"></image>
<view class="oi-desc">
<view class="od-name">羽毛球订场200元代金券欧轩运营</view>
<view class="od-price">¥ 9.9</view>
</view>
<text class="oi-icon">&#xe695;</text>
</view>
<view class="og-bottom">
<view class="ob-lines">
<view class="ol-item">
<text-line label="订单编号:">3107858392102658852</text-line>
</view>
<view class="ol-item">
<text-line label="核销券码:">3107858392102658852</text-line>
</view>
</view>
<view class="ob-status">已核销</view>
</view>
</view>
</view>
</template>
<style lang="scss" scoped>
.order-detail{
padding: 24upx;
.od-box{
background-color: #fff;
border-radius: 20upx;
&+ .od-box{
margin-top: 24upx;
}
}
.od-title{
@include flcw(28upx, 40upx, #9A9A9D);
}
.od-header{
padding: 28upx 28upx 32upx;
.oh-stadium{
margin-bottom: 14upx;
@include ctf;
.os-logo{
flex-shrink: 0;
margin-right: 10upx;
width: 34upx;
height: 34upx;
background: skyblue;
}
.os-name{
flex-grow: 1;
@include flcw(28upx, 40upx, #333, 500);
@include tHide;
}
.os-status{
flex-shrink: 0;
margin-left: 10upx;
max-width: 160upx;
@include tHide;
@include flcw(28upx, 40upx, $mColor);
}
}
.oh-line{
@include flcw(24upx, 34upx, #9A9A9D);
@include tHide;
}
}
.od-code{
padding-top: 26upx;
font-size: 0;
.oc-code-img{
display: block;
margin: 0 auto;
width: 278upx;
height: 278upx;
background: skyblue;
}
.oc-tip{
text-align: center;
@include flcw(24upx, 56upx, #666666);
}
}
.od-goods{
padding: 28upx 16upx 30upx 28upx;
.og-title{
@include flcw(28upx, 40upx, #333, 500);
}
.og-info{
margin-top: 24upx;
@include ctf;
.oi-pic{
flex-shrink: 0;
margin-right: 24upx;
width: 136upx;
height: 136upx;
background: skyblue;
}
.oi-desc{
flex-grow: 1;
align-self: stretch;
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: space-between;
.od-name{
@include flcw(26upx, 36upx, #333, 500);
@include tHide(2);
}
.od-price{
@include flcw(26upx, 36upx, #333, 500);
@include tHide;
}
}
@include rightArrow;
.oi-icon{
margin-left: 20upx;
flex-shrink: 0;
font-size: 40upx;
font-family: rightArrow;
color: #333;
}
}
.og-bottom{
margin-top: 36upx;
@include ctf(space-between);
.ob-lines{
flex-grow: 1;
.ol-item + .ol-item{
margin-top: 24upx;
}
}
.ob-status{
flex-shrink: 0;
margin-left: 10upx;
max-width: 160upx;
@include flcw(28upx, 40upx, $mColor);
@include tHide;
}
}
}
.od-payment{
padding: 30upx;
.od-title{
margin-bottom: 20upx;
}
}
.od-venue-info{
padding: 30upx;
.od-title{
margin-bottom: 20upx;
}
.soi-booking-info{
display: flex;
.sbi-name{
flex-shrink: 0;
flex-grow: 0;
@include flcw(28upx, 52upx, #9A9A9D);
}
.sbi-time-range{
flex-grow: 1;
display: flex;
flex-wrap: wrap;
.str-item{
flex-shrink: 0;
margin-right: 12upx;
max-width: 500upx;
@include flcw(28upx, 52upx, #333);
@include tHide;
}
}
}
.vmm-line{
display: flex;
>view{
font-size: 28upx;
line-height: 52upx;
&:first-child{
flex-shrink: 0;
color: #9a9a9d;
}
&+view{
flex-grow: 1;
>view{
width: 100%;
@include flcw(28upx, 52upx, #333);
@include tHide;
}
}
}
}
.soi-fold-btn{
padding-bottom: 20upx;
margin: 20upx auto 0;
@include ctf(center);
.sfb-txt{
margin-right: 12upx;
flex-grow: 0;
flex-shrink: 0;
@include flcw(24upx, 34upx, #9a9a9d);
}
@include rightArrow;
.sfb-icon{
flex-shrink: 0;
font-family: rightArrow;
font-size: 20upx;
color: #9A9A9D;
&.rotate{
transform: rotateZ(-90deg);
}
}
}
.vvm-total{
margin-top: 16upx;
padding-top: 28upx;
border-top: 1px solid #D8D8D8;
@include ctf(space-between);
>view{
max-width: 50%;
@include tHide;
@include flcw(28upx, 40upx, #333);
}
}
}
}
</style>

111
src/pages/order/list.vue

@ -0,0 +1,111 @@
<script setup>
import { onLoad } from '@dcloudio/uni-app';
import tabBar from "@/components/tab_bar.vue";
onLoad(() => {
});
</script>
<template>
<view class="order-list">
<view class="ol-header">
<tab-bar></tab-bar>
</view>
<view class="ol-list-content">
<view class="ol-item" v-for="i in 10" :key="i">
<view class="oi-header">
<image class="oh-logo"></image>
<view class="oh-name">MJ体育(天空篮球从云店)</view>
<view class="oh-status">已核销</view>
</view>
<view class="oi-info">
<view class="oi-line"><text class="ol-txt">订单信息</text>羽毛球订场200元代金券欧轩客服</view>
<view class="oi-line"><text class="ol-txt">订单编号</text>3107858392102658852</view>
</view>
<view class="oi-bottom">
<view class="ob-time">2025-08-17 18:02:45 核销</view>
<view class="ob-price"><text class="op-txt">支付</text>¥0</view>
</view>
</view>
</view>
</view>
</template>
<style lang="scss" scoped>
.order-list{
position: relative;
}
.ol-header{
position: sticky;
top: 0;
}
.ol-list-content{
padding: 24upx;
.ol-item{
padding: 28upx 24upx;
border-radius: 20upx;
background-color: #fff;
&+ .ol-item{
margin-top: 24upx;
}
.oi-header{
padding-bottom: 20upx;
border-bottom: 1px solid #d8d8d8;
@include ctf;
.oh-logo{
flex-shrink: 0;
margin-right: 10upx;
width: 34upx;
height: 34upx;
background: skyblue;
}
.oh-name{
flex-grow: 1;
@include flcw(28upx, 40upx, #333, 500);
@include tHide;
}
.oh-status{
flex-shrink: 0;
margin-left: 10upx;
max-width: 160upx;
@include tHide;
@include flcw(28upx, 40upx, $mColor);
}
}
.oi-info{
margin-top: 30upx;
.oi-line{
@include flcw(26upx, 36upx, #333333);
@include tHide;
&+ .oi-line{
margin-top: 14upx;
}
.ol-txt{
color: #9A9A9D;
}
}
}
.oi-bottom{
margin-top: 44upx;
display: flex;
justify-content: space-between;
align-items: baseline;
.ob-time{
flex-shrink: 0;
margin-right: 10upx;
max-width: 330upx;
@include flcw(24upx, 36upx, #9A9A9D);
@include tHide;
}
.ob-price{
@include flcw(32upx, 44upx, #333, 500);
@include tHide;
.op-txt{
@include flcw(24upx, 36upx, #9A9A9D);
}
}
}
}
}
</style>

31
src/pages/order/modules/text_line.vue

@ -0,0 +1,31 @@
<script setup>
const props = defineProps({
label: { default: '' }
})
</script>
<template>
<view class="text-line">
<view class="tl-label">{{ label }}</view>
<view class="tl-value"><slot></slot></view>
</view>
</template>
<style lang="scss" scoped>
.text-line{
display: flex;
align-items: flex-start;
.tl-label{
flex-grow: 0;
flex-shrink: 0;
@include flcw(26upx, 52upx, #9A9A9D);
}
.tl-value{
flex-grow: 1;
word-break: break-all;
white-space: normal;
@include flcw(26upx, 52upx, #333);
}
}
</style>

18
src/pages/tem.vue

@ -0,0 +1,18 @@
<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { reactive, ref } from "vue";
onLoad(() => {
});
</script>
<template>
<view>
</view>
</template>
<style lang="scss" scoped>
</style>

BIN
src/static/images/douyin_logo.png

After

Width: 128  |  Height: 128  |  Size: 2.3 KiB

16
src/styles/iconfonts.scss

@ -1,5 +1,13 @@
// iconfont 圆圈白勾成功 (&#xe605;)
@mixin circleSuccess {
font-family: 'circleSuccess';
src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALgAAsAAAAABqwAAAKRAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACCcAqBJIE5ATYCJAMICwYABCAFhGcHMxv4BcgekiSBOox5QEIkAShQPHytoe/v7YVZIWoiB6jiSGV8HMhwna3ylUBCd25yLrOx2ixQVN+NkAtJ2y+nGSl0wOqFHPB5QMXkyO+mdp/Mok//czm+uwLaIB/A25PG2tSmAwuwlx1GYy/CXkwN0yu/wgBeI9BgURbPnaKKBhBwx1IdhPAmqoMsPe5kkQX+3CHLMFwn1AydmsUXJek5waf/fvyzHP4kZUFkHd0WCmD3Zyl7FI/VMMU3T8sVwN0SShSYBWTirDtwwEs0Ubw0GLwNw9ws+FlWbqsXh9YI9teJ1CYwBLnPxNP8R01NIMfaJcDJpCak/iB2vOnuTjFHmu/vmRONt7fM4YabG29bU8NpZeHY7eb7+vvkh+8iNVw07OasuIekLkc7M/XOtDu6LiDLsVL9dqbLcdHwPNf93EJP+8d6aVpK6U9mOQ3PRfmu3ZbY//vOL+9IqpYzdmwAKhF68FY8/c/9PPwfs7sDV379GzP4fja474XDTNSd0BD8vQYvs6oi80RSRkdqIFma5EtokG4qwtLhbaqy8y4joU7nvZpqDWZQqDOMZPI0lBotQ406q9BgRuHsRp1MXiLXY9wYgNBmEZIWX6HQ5gTJ5Hso9fiEGm3+ocFFNC/XaDz4fIJYigTIDUKZN3SsFNQTrUNir8qSOm8TIrYM3TA2KqYcLkY6InOMsPvEOEoxxMTQYBHdDamqAU1iOBFPoyRKzbToaNz0kSje0EA+AmFRiADiDIJkPIMOW3xa/L06iKiXikUGIk0BwiZD4lCsKDEDkGKpPqjkQVax9RHFoSgMwggIaaAi3glRqQyQ2dzJCeFRUaQJPlOaaImHh0qjtpdrf4/DKhCqFLJJof5KQrooGloDAAAAAA==') format('woff2');
// iconfont 右向双箭头 (&#xe660;)
@mixin doubleRightArrow {
font-family: 'doubleRightArrow';
src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAL8AAsAAAAABrwAAAKuAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACCcAqBLIEhATYCJAMICwYABCAFhGcHOhvnBRHVk09kf0tumwWr3f0JBctgYaO6i6ij4YkDCqy+Jh72CG34h4bNoJmbfSsTmD0uE0Sx329Pvogk1WpS/5AomSFUplMyjUqjESKNZCUxjwdiv/nQJg1CIiQaR4RGJLokukSxSV3zxtpS3i176Pv/d/NWA+h/8TCicKznc9iB1BaO7AJKuAQIyAOHHMjhwi1wSbxecPD/1wYZOvXSJWd+c64pGaFGcvbJoy+k5WWXpg8BUF/I1QLs81yTr4AO+IPI1aopqmlNBzawTQ+nEW0j3BsQbZhe+RUG8B0ExC3saPFarkhP1WKuzoleQVYp0zhoifIg5zATJcJD10aRsxh0Ez7h2X9f/qyioEIRRM1dXOp6/3TlhMgqmNjHvFwTvExBCBiYAIdUupM3YqSJNXGna8F6J/htBlsHcug/D4kjypMAmpB/JkGLj1quADwOLsB60uOgGdMNcZvTsEK8Ps+rbBTeTy+7TBt1b2/fl2y40dY73u5yTpmPFg4Nq97/+Hp/eUg2PDK87P714Z+syqh5mZK2VL1qhAOBQKSXztb/8Doe69q7VGETB+C7dvm8apgb0ZM4BX9syKoQBDgvBo0CHeUBtZgUVxCXEQgIb97XVFPhzrIiqnB/7ohGBhPVIpwZISRhhbCoLeLGrpsTCh6IkWgM6HkCEFkvUGlvMFkfhDOfCCn7Q1jWP+LuaWK/hF6KOTEqQQv6D9HQ7pRRvNI7+l4U18XeyC3CCCzjXM7ccEeeY0H7+FXEgWOqcKWXYSkEB1NCI2MQObZpck0fGQ3V4cSoBC3QfxAN7c7KS/H37uh7UTyQeCe5RagcLEbzAOKm2we1Pcgh7eNXIg44BukKrnwUlkLgaB6V0MgoTIgfm0nKuaG6cXtD/Xsc60KYNTnHcOotdLX7FE1CqA8DAAA=') format('woff2');
}
// iconfont 右向箭头 (&#xe695;)
@mixin rightArrow {
@font-face {
font-family: 'rightArrow';
src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAKUAAsAAAAABlQAAAJIAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACCcApQYQE2AiQDCAsGAAQgBYRnBy8bnAXILrBt2JMiLSOMDeBm+nYdAQ4hgmiMNXt3iEhS7TSyaDJJlEIUq4QKIZGS/H8US9Z/a9nydAUeFU+pVX2zV7N3fXdy+eYowj4Ij3G47t9hEQrJXDfc8CCqkees7DI36lL+BvTAC0Jf0jr1Zq3jAX08IHnA9GKlEWYyHuQM0ytf0EBcIlBrzr6hpfPbOkyeO5LDtBG6O8gK4zwKHJjgYUWBuWqhcujKIh6ggnQ59A3cR5+PX5ZjgqQi0yWrZ2c+vM6MGb4r78if3C3XAs9LqEDGFFCIze70smHRxA+rdY8YgI1F8FVZBi5xaLtgf53Orwf9UHgm0UmPmkvwWH21AT2TnkW0Ff12v3/1dNEVqOeL5+sOenp87cx0G40v+153ff07zv9qNDoNOESe9DG/16+Cf+3739ZUfxN1BXxuMKorckb1TtzBHzHuDCQWESGVJpErk7aT6GpNjP+0v9XPVEvbmZWheoK3Sl+GrNoAVbgJVKizgErVFlFr0tn6Om2MYVFqMOIRIDR7QdLoBVmzN6pwA1To9ItKzf5RazvYrc5IeCdMjpCPbg8jT+fKmiVSW6WglTpcl2gSFxGM4dL8Yjl3QTnxHHOKdrAsolCxzvCcnkdpqtGwjsmT+VDEbC8sqKa3zHs6gxOMOATxIVcPini0nArIUvy+KhJoSTl4INVMs0IE1aMl8xYHUBeGfFDHg1xTaAssE0JBCtMy6JwPI6mUhkzzsBjxiHnhhKSxbcGQ1FDD/Pam7Nf2QC1tTWEGZBWHzLoDAAAA') format('woff2');
}
}

2
src/uni.scss

@ -2,4 +2,4 @@
@use '@/styles/iconfonts.scss' as *;
/* uniapp 全局样式 */
$mColor: skyblue;
$mColor: #009874;

1
vite.config.js

@ -16,6 +16,7 @@ export default defineConfig(({ mode = 'development' }) =>{
uni(),
],
define: {
"__VUE_OPTIONS_API__": false,
__API__: JSON.stringify(env.VITE_API_BASE),
},
// 修复控制台出现 Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0 的问题

Loading…
Cancel
Save