change default font size

Overwrite default fontsize

<style type="text/css">
.rich-panel-body {font-family: 'Calibri'; font-size:x-large }
</style>
<template> <uni-popup ref="popup" :type="type" :mask-click="maskClick" @change="change"> <view class="zy-dialog"> <view class="zy-dialog__icon" v-if="showIcon"> <image :src="iconUrl" mode="aspectFit" class="icon-image"></image> </view> <view class="zy-dialog__title" v-if="title" :class="{ 'has-icon': showIcon }"> <text class="title-text">{{ title }}</text> </view> <view class="zy-dialog__content"> <text class="content-text" v-if="content">{{ content }}</text> </view> <view class="zy-dialog__custom" v-if="$slots?.custom"> <slot name="custom"></slot> </view> <view class="zy-dialog__footer" :class="{ 'column-layout': buttonLayout === 'column' }"> <block v-if="buttonLayout === 'row'"> <view class="footer-button cancel" v-if="showCancel" @click="handleCancel"> <text class="button-text">{{ cancelText }}</text> </view> <view class="footer-button more" v-if="showMore" @click="handleMore"> <text class="button-text">{{ moreText }}</text> </view> <view class="footer-button primary" v-if="showPrimary" @click="handlePrimary"> <text class="button-text">{{ primaryText }}</text> </view> </block> <block v-else> <view class="footer-button primary" v-if="showPrimary" @click="handlePrimary"> <text class="button-text">{{ primaryText }}</text> </view> <view class="footer-button more" v-if="showMore" @click="handleMore"> <text class="button-text">{{ moreText }}</text> </view> <view class="footer-button cancel" v-if="showCancel" @click="handleCancel"> <text class="button-text">{{ cancelText }}</text> </view> </block> </view> </view> </uni-popup> </template> <script> export default { name: 'zy-dialog', props: { type: { type: String, default: 'center' }, title: { type: String, default: '' }, content: { type: String, default: '' }, showCancel: { type: Boolean, default: true }, cancelText: { type: String, default: '取消' }, confirmText: { type: String, default: '确定' }, maskClick: { type: Boolean, default: false }, showIcon: { type: Boolean, default: false }, iconUrl: { type: String, default: '' }, showPrimary: { type: Boolean, default: false }, primaryText: { type: String, default: '主操作' }, showMore: { type: Boolean, default: false }, moreText: { type: String, default: '更多' }, buttonLayout: { type: String, default: 'row', // 'row' | 'column' validator: function (value) { return ['row', 'column'].indexOf(value) !== -1 } } }, data() { return {} }, methods: { show() { this.$refs.popup.open() }, hide() { this.$refs.popup.close() }, handleConfirm() { this.$emit('confirm') this.hide() }, handleCancel() { this.$emit('cancel') this.hide() }, change(e) { this.$emit('change', e) }, handlePrimary() { this.$emit('primary') this.hide() }, handleMore() { this.$emit('more') this.hide() } } } </script> <style lang="scss"> .zy-dialog { width: 280px; border-radius: 8px; background-color: $uni-bg-color-inverse; overflow: hidden; &__icon { display: flex; justify-content: center; padding-top: 20px; .icon-image { width: 80px; height: 80px; } } &__title { margin-top: 20px; padding: 0 12px; text-align: center; &.has-icon { margin-top: 12px; } .title-text { font-size: $uni-font-size-18; font-weight: bold; color: $uni-text-color; line-height: 25px; } } &__content { margin-top: 8px; padding: 0 12px; text-align: center; .content-text { font-size: $uni-font-size-15; color: $uni-text-color; line-height: 21px; } } &__custom { margin-top: 16px; padding: 0 20px; :deep(.uni-easyinput__content) { background-color: $uni-bg-color-grey; border-radius: 4px; height: 44px; padding: 0 12px; } :deep(.uni-easyinput__placeholder-class) { font-size: $uni-font-size-15; color: $uni-text-color-placeholder; } :deep(.uni-easyinput__content-input) { font-size: $uni-font-size-15; color: $uni-text-color; } } &__footer { display: flex; margin-top: 20px; border-top: 1px solid $uni-border-color; &.column-layout { flex-direction: column; .footer-button { border-right: none; border-bottom: 1px solid $uni-border-color; &:last-child { border-bottom: none; } } } .footer-button { flex: 1; height: 49px; line-height: 49px; display: flex; align-items: center; justify-content: center; &.cancel { border-right: 1px solid $uni-border-color; .button-text { color: $uni-primary; } } &.more { border-right: 1px solid $uni-border-color; .button-text { color: $uni-primary; } } &.primary { .button-text { color: $uni-primary; font-weight: bold; } } .button-text { font-size: $uni-font-size-18; font-weight: 400; } } } } </style> 参照当前组件去改动刚刚提供的ZyImagePreview 组件
最新发布
09-06
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值