Ver código fonte

Merge remote-tracking branch 'origin/2025北京诚祥' into 2025北京诚祥

wangxy 3 meses atrás
pai
commit
247121072c

+ 60 - 0
common/styles/global/components.scss

@@ -0,0 +1,60 @@
+/******************** 这里放组件样式 ********************/
+
+/***** view *****/
+view{box-sizing: border-box;}
+
+/***** 对齐方式 *****/
+.ezy-tl{text-align: left;}
+.ezy-tc{text-align: center;}
+.ezy-tr{text-align: right;}
+
+/***** 超出省略 *****/
+// 文本超出省略号显示 (一行)
+@mixin single-line-ellipsis() {text-overflow: ellipsis;overflow: hidden;word-wrap: break-word;white-space: nowrap;word-break: break-all;}
+// 文本超出省略号显示 (多行)
+@mixin multi-line-ellipsis($rows: 3){-webkit-line-clamp:$rows;text-overflow: ellipsis;-o-text-overflow: ellipsis;overflow: hidden;word-wrap: break-word;display: -webkit-box;white-space: normal !important;-webkit-box-orient: vertical;}
+
+/***** 页面背景图 *****/
+//  no-repeat  cover
+@mixin ezy-no-repeat-cover($position: center) {
+  background-position: $position;background-size: cover;background-repeat: no-repeat;
+}
+//  no-repeat  contain
+@mixin ezy-no-repeat-contain($position: center) {
+  background-position: $position;background-size: contain;background-repeat: no-repeat;
+}
+
+/***** 标题栏  *****/
+// 三个元素
+.ezy-navBar-box{
+	display: flex;align-items: center;justify-content: space-between;
+	padding: 0 20rpx 20rpx;box-sizing: border-box;position: relative;
+	.nav-bar-icon{
+		width: 24rpx;height: 38rpx;
+		background-image: url("@/static/images/common/nav-bar-jt.svg");@include ezy-no-repeat-cover();
+	}
+	.nav-bar-title{font-size: 36rpx;color: #333;}
+	// 考试数字
+	.nav-bar-other{
+		font-size: 30rpx;color: #fff;margin-right: 2%;
+		.key-note{color: #ffff01;}
+	}
+	// 文字按钮
+	.text-btn{font-size: 26rpx;color: #666;padding-top: 4rpx;box-sizing: border-box;}
+}
+// 两个元素
+.icon-title-navBar-box{
+	display: flex;align-items: center;justify-content: center;
+	padding: 0 20rpx 20rpx;box-sizing: border-box;position: relative;
+	.nav-bar-title{
+		font-size: 36rpx;height: 63rpx;line-height: 63rpx;color: #333;max-width: 70%;
+	}
+	.nav-bar-icon{
+		width: 24rpx;height: 38rpx;position: absolute;left: 24rpx;top: 12rpx;
+		background-image: url("@/static/images/common/nav-bar-jt.svg");@include ezy-no-repeat-cover();
+	}
+}
+// 仅一个返回按钮
+.ezy-nav-bar-icon{width: 24rpx;height: 38rpx;position: absolute;left: 24rpx;top: var(--status-bar-height);
+		background-image: url("@/static/images/common/nav-bar-jt.svg");@include ezy-no-repeat-cover();
+	}

+ 2 - 0
common/styles/index.scss

@@ -0,0 +1,2 @@
+// 组件样式
+@import '/common/styles/global/components.scss';

+ 35 - 0
pages/demo/demo1.vue

@@ -0,0 +1,35 @@
+<template>
+	<view class="demo1">
+		<!---------- 标题文字 ------------>
+		<!-- 箭头+标题文字 -->
+		<view class="icon-title-navBar-box">
+			<view @click="goUpPage" class="nav-bar-icon"></view>
+			<text class="nav-bar-title">箭头+标题文字</text>
+		</view>
+		
+		<!-- 箭头+标题文字 + 文字按钮-->
+		<view class="ezy-navBar-box">
+			<view class="nav-bar-icon"></view>
+			<text class="nav-bar-title">订单支付</text>
+			<view class="text-btn">取消订单</view>
+		</view>
+		<!--  仅一个箭头 -->
+		<!-- <view @click="goUpPage" class="ezy-nav-bar-icon"></view> -->
+		<view class="icon-title-navBar-box">
+			<text class="nav-bar-title">标题文字</text>
+		</view>
+		<!-- switch -->
+		<view>
+			<view class="uni-list-cell-db">照片</view>
+			<switch checked @change="switch1Change" />
+		</view>
+		<!---------- 搜索框 ------------>
+	</view>
+</template>
+
+<script setup>
+	function goUpPage(){}
+</script>
+
+<style>
+</style>

+ 1 - 0
static/images/common/nav-bar-jt.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1739178328843" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5033" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M375.467 512l370.915-329.955c18.205-15.93 20.48-45.512 4.551-63.716-15.928-18.204-45.511-20.48-63.715-4.55l-409.6 364.088c-11.378 9.102-15.93 20.48-15.93 34.133s4.552 25.031 15.93 34.133l409.6 364.089c9.102 6.827 20.48 11.378 29.582 11.378 13.653 0 25.031-4.551 34.133-15.929 15.929-18.204 15.929-47.786-4.551-63.716L375.467 512z" p-id="5034" fill="#333333"></path></svg>