APP
/
uni_cli_dy_verify
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

add style

dev
刘嘉炜 4 weeks ago
parent
2a68a3cbdc
commit
3b08a7065f
12 changed files with 593 additions and 16 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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
View File

@ -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
View File

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

23
src/pages.json
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

Side by Side

After

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

16
src/styles/iconfonts.scss
View File

@ -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
View File

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

1
vite.config.js
View File

@ -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 的问题

Write Preview
Loading…
Cancel
Save