..
This commit is contained in:
@@ -170,3 +170,74 @@ body {
|
||||
margin-top: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
|
||||
/*****************************申请表单CSS********************************/
|
||||
.form-container {
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
.form-container .form-group {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.form-container .form-actions {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 12px 16px;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.form-container .form-actions .van-button {
|
||||
flex: 1;
|
||||
margin: 0 8px;
|
||||
border-radius: 4px;
|
||||
height: 40px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.form-container .van-cell-group {
|
||||
margin-bottom: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.form-container .van-cell-group__title {
|
||||
padding: 12px 16px 8px;
|
||||
font-size: 15px;
|
||||
color: #323233;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.form-container .van-field__label {
|
||||
width: 90px;
|
||||
color: #323233;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.form-container .van-field__value {
|
||||
color: #323233;
|
||||
}
|
||||
|
||||
.form-container .van-cell {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.form-container .van-cell:not(:last-child)::after {
|
||||
left: 16px;
|
||||
right: 16px;
|
||||
}
|
||||
|
||||
.form-container .direction-column-field .van-field__body {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.form-container .direction-column-field .van-field__control {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
|
||||
@@ -65,27 +65,32 @@ const styleUtil = {
|
||||
|
||||
// 为CSS规则添加作用域属性
|
||||
scopeCss(css, scopedId) {
|
||||
// 处理CSS规则,为每个选择器添加[scopedId]
|
||||
const processedCss = css.replace(/([^{]+){/g, (match, selectors) => {
|
||||
return selectors.split(',')
|
||||
// 使用正则表达式匹配CSS选择器和规则块
|
||||
// 这种方法可以确保我们只处理选择器部分,而不会影响CSS属性值
|
||||
return css.replace(/([^{]+)({[^}]*})/g, (match, selectors, rules) => {
|
||||
// 处理选择器部分
|
||||
const processedSelectors = selectors.split(',')
|
||||
.map(selector => {
|
||||
selector = selector.trim();
|
||||
|
||||
// 处理深度选择器
|
||||
if (selector.includes('::v-deep')) {
|
||||
return selector.replace('::v-deep', `[${scopedId}]`);
|
||||
}
|
||||
|
||||
// 处理媒体查询等特殊情况
|
||||
if (selector.includes('@') || selector.trim().startsWith('@')) {
|
||||
if (selector.includes('@') || selector.startsWith('@')) {
|
||||
return selector;
|
||||
}
|
||||
|
||||
// 普通选择器
|
||||
return `${selector.trim()}[${scopedId}]`
|
||||
return `${selector}[${scopedId}]`;
|
||||
})
|
||||
.join(',') + '{'
|
||||
})
|
||||
.join(', ');
|
||||
|
||||
return processedCss
|
||||
// 返回处理后的选择器和原始规则块
|
||||
return processedSelectors + rules;
|
||||
});
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
@@ -1,13 +0,0 @@
|
||||
<script>
|
||||
module.exports = {
|
||||
name: "index"
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user