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

add style

dev
刘嘉炜 3 days ago
parent
8aeb96e27c
commit
798835fb6b
6 changed files with 204 additions and 0 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. 17
      src/pages.json
  2. 7
      src/styles/iconfonts.scss
  3. 81
      src/subpackage/groupon/components/search_bar.vue
  4. 45
      src/subpackage/groupon/components/ticket_item.vue
  5. 32
      src/subpackage/groupon/pages/list.vue
  6. 22
      src/subpackage/groupon/pages/stadiums.vue

17
src/pages.json
View File

@ -24,6 +24,23 @@
}
}
]
},
{
"root": "subpackage/groupon",
"pages": [
{
"path": "pages/stadiums",
"style": {
"navigationBarTitleText": "选择门店"
}
},
{
"path": "pages/list",
"style": {
"navigationBarTitleText": "抖音团购券"
}
}
]
}
],
"globalStyle": {

7
src/styles/iconfonts.scss
View File

@ -52,5 +52,12 @@
}
}
// iconfont search ()
@mixin searchIcon {
@font-face {
font-family: 'searchIcon';
src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALYAAsAAAAABqAAAAKLAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACCcAqBHIE6ATYCJAMICwYABCAFhGcHMBv2BcgOJUEPwYDhIQBEBF973b67C601DQ7dmjCoOIxgUDA+yqB8JHSN/n/up9lYbQ44N92yG7JCSPNfSp8uPyVHrtUDckDngR2i2xQYtdv/XE6vtm+cH8Dbk8ba1KYDCzA9oMZaFmEvD71FvdaXZmTEKwId9tRLP27vHUB5dSJUVCKT7Qyy0qh73QTlSr+i4FSb0AJdWcSrLNJzuoW8RJ+PP47IJalltuLsoU1C5z8HzpiMaBWFclN0vjp8XkINGVuQQlx1x09kiCZahg57pgVcXQSfB///gU3s2izEX2eLu8AUltyT1JPdanECJek+gFyMuoU03z/8NPiWGt6rGZxN7cYKhs6cH7Gh93eXnRx4fVVGWyLjZx+pN0uNvlKT7z1iHy9bVU2lLWVzZKaW22gsljnLFxcWvlbLWuZQsLQJgAhDI0Be1pBB1xZlU9jlDAyY5bCQygqISUjGo0YIVTM/5fL/+Rs990c70/mH/22dBbxLke/IWzULmBNpO6E9+HvaCSBqUQFSaZJKZ3IwKprQ4YSoWPeAz7GGwbtMhzaD9+psNZlB1mYBV0gbUNPpAFq0OYIOm9rWdxqkyxClHSsSCEKfbUh6vEHW5wJXSB9QM+IXWvT5gw430b1bp5WgLRyIAAm7IthLNZW5ehFh7QN3QCa8LjIE3PDiELZbbOVUB6jAp5hjBN0OIRhmXFNwOz8PZFnDOtd8QIXFI4RebbWyprdYqKagFhwgBCDBXCIwL0qjYgG6KH5fH+AWICM4EDcU5wxejB2zs7ABcB0aFdR0J/sYgtwcBIHBGI6SCqxdDgMymQbTm4f5AEqw8IyI6qpZHTQG1VjW1ylfTyzasMYUzqCs5REIpx6EAAA=') format('woff2');
}
}

81
src/subpackage/groupon/components/search_bar.vue
View File

@ -0,0 +1,81 @@
<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { reactive, ref } from "vue";
onLoad(() => {
});
</script>
<template>
<view class="search-bar">
<view class="sb-frame">
<picker class="sf-picker" mode="time">
<view class="sf-select">
<view class="ss-val">广州市</view>
<text class="ss-icon">&#xe695;</text>
</view>
</picker>
<view class="sf-ipt">
<text class="si-icon">&#xe6b9;</text>
<input class="si-ipt" placeholder="搜索门店" />
</view>
</view>
</view>
</template>
<style lang="scss" scoped>
.search-bar{
padding: 8upx 24upx;
background: #fff;
.sb-frame{
padding: 8upx 20upx;
height: 72upx;
border-radius: 36upx;
background: #F2F2F2;
@include ctf(space-between);
.sf-picker{
align-self: stretch;
flex-shrink: 0;
.sf-select{
height: 100%;
width: 130upx;
border-right: 1px solid #EAEAEA;
@include ctf(center);
.ss-val{
@include flcw(24upx, 34upx, #666);
@include tHide;
}
@include rightArrow;
.ss-icon{
flex-shrink: 0;
margin-left: 4upx;
font-size: 24upx;
font-family: rightArrow;
color: #666666;
}
}
}
.sf-ipt{
flex-grow: 1;
align-self: stretch;
padding-left: 10upx;
@include ctf;
@include searchIcon;
.si-icon{
flex-shrink: 0;
margin-right: 10upx;
font-size: 34upx;
font-family: searchIcon;
color: #9F9F9F;
}
.si-ipt{
flex-grow: 1;
height: 100%;
@include flcw(24upx, 34upx, #666666);
}
}
}
}
</style>

45
src/subpackage/groupon/components/ticket_item.vue
View File

@ -0,0 +1,45 @@
<script setup>
import { reactive, ref } from "vue";
</script>
<template>
<view class="ticket-item">
<view class="ti-left">
<view class="tl-tit">订场100元代金券【欧轩运动生活】</view>
<view class="tl-time">有效时间：2025.03.03至2026.03.03</view>
</view>
<view class="ti-btn">立即使用</view>
</view>
</template>
<style lang="scss" scoped>
.ticket-item{
padding: 24upx;
border: 1px solid #FFD2D1;
border-radius: 20upx;
background-color: rgba($color: #FE5353, $alpha: .05);
@include ctf(space-between);
.ti-left{
flex-grow: 1;
.tl-tit{
@include flcw(32upx, 44upx, #333);
@include tHide(2);
}
.tl-time{
@include flcw(24upx, 52upx, #9A9A9D);
@include tHide;
}
}
.ti-btn{
flex-grow: 0;
flex-shrink: 0;
margin-left: 20upx;
padding: 0 20upx;
text-align: center;
border-radius: 50upx;
border: 2upx solid #E11E1E;
@include flcw(24upx, 46upx, #E11E1E);
}
}
</style>

32
src/subpackage/groupon/pages/list.vue
View File

@ -0,0 +1,32 @@
<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { reactive, ref } from "vue";
import ticketItem from "../components/ticket_item.vue";
onLoad(() => {
});
</script>
<template>
<view class="groupon-list">
<view class="gl-item" v-for="i in 3" :key="i">
<ticket-item></ticket-item>
</view>
</view>
</template>
<style lang="scss" scoped>
.groupon-list{
padding: 24upx;
@include isPd(24upx);
.gl-item{
padding: 24upx;
border-radius: 20upx;
background-color: #fff;
&+.gl-item{
margin-top: 22upx;
}
}
}
</style>

22
src/subpackage/groupon/pages/stadiums.vue
View File

@ -0,0 +1,22 @@
<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { reactive, ref } from "vue";
import searchBar from "../components/search_bar.vue";
onLoad(() => {
});
</script>
<template>
<view class="stadium-select">
<search-bar></search-bar>
123
</view>
</template>
<style lang="scss" scoped>
.stadium-select{
}
</style>
Write Preview
Loading…
Cancel
Save