以下mrviewer.vue在最右邊增加區塊，將控制面板上的病態關聯
本草關聯
方劑關聯
典籍關聯
人物關聯
辨證關聯 等移到新增的區塊上並保持功能：
<!
-- mrviewer.vue
-->
<template>
<
div class="container">
<!
-- 控制面板
-->
<
div class="control
-panel">
<button @click="fetchData" class="refresh
-btn">刷新數據</button>
<button @click="toggleRelative" class="relative
-btn">
{{ showRelative ? '病態關聯' : '病態關聯' }}
</button>
<!
-- 本草关联器按钮
-->
<button @click="toggleMNRelative" class="relative
-btn">
{{ showMNRelative ? '本草關聯' : '本草關聯' }}
</button>
<!
-- 方剂关联器按钮
-->
<button @click="togglePNRelative" class="relative
-btn">
{{ showPNRelative ? '方劑關聯' : '方劑關聯' }}
</button>
<!
-- 出处关联器按钮
-->
<button @click="toggleSNRelative" class="relative
-btn">
{{ showSNRelative ? '典籍關聯' : '典籍關聯' }}
</button>
<!
-- 人物关联器按钮
-->
<button @click="toggleFNRelative" class="relative
-btn">
{{ showFNRelative ? '人物關聯' : '人物關聯' }}
</button>
<!
-- 新增辨證关联器按钮
-->
<button @click="toggleDianNRelative" class="relative
-btn">
{{ showDianNRelative ? '辨證關聯' : '辨證關聯' }}
</button>
<input v
-model="searchQuery"
placeholder="搜索..."
class="search
-input" />
<
div class="pagination
-controls">
<span>每頁顯示:</span>
<select v
-model.number="pageSize" class="page
-size
-select">
<option value="1">1筆</option>
<option value="4">4筆</option>
<option value="10">10筆</option>
</select>
<button @click="prevPage" :disabled="currentPage === 1">上一页</button>
<span>第</span>
<input type="number"
v
-model.number="inputPage"
min="1"
:max="totalPages"
class="page
-input"
@input="handlePageInput">
<span>頁 / 共 {{ totalPages }} 頁</span>
<button @click="nextPage" :disabled="currentPage === totalPages">下一頁</button>
<span>醫案閱讀器</span>
</
div>
</
div>
<!
-- 主内容区域
-->
<
div class="content
-area">
<
div class="horizontal
-records" v
-if="filteredData.length > 0">
<
div v
-for="(item, index) in paginatedData" :key="item.id" class="record
-card">
<
div class="record
-header">
<h3>醫案 #{{ (currentPage
- 1) * pageSize + index + 1 }}</h3>
</
div>
<
div class="record
-body">
<
div v
-for="(value, key) in processFieldNames(item)" :key="key" class="record
-field">
<
div class="field
-name">{{ key }}:</
div>
<
div class="field
-value">
<!
-- 病态名称
-->
<
div v
-if="key === '相關病態' && Array.isArray(value)"
class="dntag
-value"
v
-html="formatDntagValueHTML(value)"></
div>
<!
-- 本草名称
-->
<
div v
-else
-if="key === '相關本草' && Array.isArray(value)"
class="mntag
-value"
v
-html="formatMntagValueHTML(value)"></
div>
<!
-- 方剂名称
-->
<
div v
-else
-if="key === '相關方劑' && Array.isArray(value)"
class="pntag
-value"
v
-html="formatPntagValueHTML(value)"></
div>
<!
-- 出处名称
-->
<
div v
-else
-if="key === '相關典籍' && Array.isArray(value)"
class="sntag
-value"
v
-html="formatSntagValueHTML(value)"></
div>
<!
-- 人物名称
-->
<
div v
-else
-if="key === '相關人物' && Array.isArray(value)"
class="fntag
-value"
v
-html="formatFntagValueHTML(value)"></
div>
<!
-- 辨證名称
-->
<
div v
-else
-if="key === '相關辨證' && Array.isArray(value)"
class="diantag
-value"
v
-html="formatDiantagValueHTML(value)"></
div>
<
div v
-else
-if="Array.isArray(value)" class="array
-value">
<span v
-for="(subItem, subIndex) in value" :key="subIndex">
<span v
-html="formatValue(subItem, key)"></span><span v
-if="subIndex < value.length
- 1">；</span>
</span>
</
div>
<
div v
-else v
-html="formatValue(value, key)"></
div>
</
div>
</
div>
</
div>
</
div>
</
div>
<
div v
-else class="no
-data">
沒有找到匹配的數據
</
div>
</
div>
<!
-- 相关区域
-->
<
div class="relative
-area">
<mrdnrelate v
-if="showRelative"
:currentCase="currentCase"
:allTags="api2Data"
@data
-updated="handleDataUpdated"></mrdnrelate>
<!
-- 本草关联器
-->
<mrmnrelate v
-else
-if="showMNRelative"
:currentCase="currentCase"
:allTags="api3Data"
@data
-updated="handleDataUpdated"></mrmnrelate>
<!
-- 方剂关联器
-->
<mrpnrelate v
-else
-if="showPNRelative"
:currentCase="currentCase"
:allTags="api5Data"
@data
-updated="handleDataUpdated"></mrpnrelate>
<!
-- 出处关联器
-->
<mrsnrelate v
-else
-if="showSNRelative"
:currentCase="currentCase"
:allTags="api4Data"
@data
-updated="handleDataUpdated"></mrsnrelate>
<!
-- 人物关联器
-->
<mrfnrelate v
-else
-if="showFNRelative"
:currentCase="currentCase"
:allTags="api6Data"
@data
-updated="handleDataUpdated"></mrfnrelate>
<!
-- 新增辨證关联器
-->
<mrdianrelate v
-else
-if="showDianNRelative"
:currentCase="currentCase"
:allTags="api7Data"
@data
-updated="handleDataUpdated"></mrdianrelate>
<span v
-else>點按下方關聯器，顯示醫案相關專有名詞</span>
</
div>
</
div>
</template>
<script>
import mrdnrelate from './mrdnrelate.vue';
import mrmnrelate from './mrmnrelate.vue';
import mrpnrelate from './mrpnrelate.vue';
import mrsnrelate from './mrsnrelate.vue';
import mrfnrelate from './mrfnrelate.vue';
import mrdianrelate from './mrdianrelate.vue'; // 导入辨證关联器组件
export default {
name: 'mrviewer',
components: { mrdnrelate, mrmnrelate, mrpnrelate, mrsnrelate, mrfnrelate, mrdianrelate },
data() {
return {
api1Data: [],
api2Data: [],
api3Data: [],
api4Data: [],
api5Data: [],
api6Data: [],
api7Data: [], // 辨證标签数据
mergedData: [],
currentPage: 1,
pageSize: 1,
searchQuery: '',
sortKey: '',
sortOrders: {},
inputPage: 1,
fieldNames: {
'mrcase': '醫案全文',
'mrorigin': '醫案出處',
'mrdoctor': '醫案醫者',
'mrname': '醫案命名',
'mrposter': '醫案提交者',
'mrlasttime': '最後編輯時間',
'mreditnumber': '編輯次數',
'mrreadnumber': '閱讀次數',
'mrpriority': '重要性',
'dntag': '相關病態',
'mntag': '相關本草',
'pntag': '相關方劑',
'sntag': '相關典籍',
'fntag': '相關人物',
'diantag': '相關辨證' // 新增辨證字段
},
inputTimeout: null,
dnNames: [],
mnNames: [],
pnNames: [],
snNames: [],
fnNames: [],
dianNames: [], // 辨證名称列表
stateVersion: '1.0',
showRelative: false,
showMNRelative: false,
showPNRelative: false,
showSNRelative: false,
showFNRelative: false,
showDianNRelative: false, // 控制辨證关联器显示
currentCase: null
};
},
computed: {
filteredData() {
const query = this.searchQuery.trim();
if (query && /^\d+$/.test(query)) {
const idToSearch = parseInt(query, 10);
return this.mergedData.filter(item => item.id === idToSearch);
}
if (!query) return this.mergedData;
const lowerQuery = query.toLowerCase();
return this.mergedData.filter(item => {
return Object.values(item).some(value => {
if (value === null || value === undefined) return false;
if (Array.isArray(value)) {
return value.some(subValue => {
if (typeof subValue === 'object' && subValue !== null) {
return JSON.stringify(subValue).toLowerCase().includes(lowerQuery);
}
return String(subValue).toLowerCase().includes(lowerQuery);
});
}
if (typeof value === 'object' && value !== null) {
return JSON.stringify(value).toLowerCase().includes(lowerQuery);
}
return String(value).toLowerCase().includes(lowerQuery);
});
});
},
sortedData() {
if (!this.sortKey) return this.filteredData;
const order = this.sortOrders[this.sortKey] || 1;
return [...this.filteredData].sort((a, b) => {
const getValue = (obj) => {
const val = obj[this.sortKey];
if (Array.isArray(val)) return JSON.stringify(val);
return val;
};
const aValue = getValue(a);
const bValue = getValue(b);
if (aValue === bValue) return 0;
return aValue > bValue ? order :
-order;
});
},
paginatedData() {
const start = (this.currentPage
- 1) * Number(this.pageSize);
const end = start + Number(this.pageSize);
const data = this.sortedData.slice(start, end);
if (data.length > 0) {
this.currentCase = data[0];
} else {
this.currentCase = null;
}
return data;
},
totalPages() {
return Math.ceil(this.filteredData.length / this.pageSize) || 1;
}
},
watch: {
pageSize() {
this.currentPage = 1;
this.inputPage = 1;
this.saveState();
},
currentPage(newVal) {
this.inputPage = newVal;
this.saveState();
},
filteredData() {
if (this.currentPage > this.totalPages) {
this.currentPage = Math.max(1, this.totalPages);
}
this.inputPage = this.currentPage;
},
searchQuery() {
this.saveState();
}
},
methods: {
handleDataUpdated() {
alert('數據已更新，正在刷新醫案數據...');
this.fetchData();
},
toggleMNRelative() {
if (!this.showMNRelative) {
this.showRelative = false;
this.showPNRelative = false;
this.showSNRelative = false;
this.showFNRelative = false;
this.showDianNRelative = false;
}
this.showMNRelative = !this.showMNRelative;
},
togglePNRelative() {
if (!this.showPNRelative) {
this.showRelative = false;
this.showMNRelative = false;
this.showSNRelative = false;
this.showFNRelative = false;
this.showDianNRelative = false;
}
this.showPNRelative = !this.showPNRelative;
},
toggleSNRelative() {
if (!this.showSNRelative) {
this.showRelative = false;
this.showMNRelative = false;
this.showPNRelative = false;
this.showFNRelative = false;
this.showDianNRelative = false;
}
this.showSNRelative = !this.showSNRelative;
},
toggleRelative() {
if (this.showRelative) {
this.showRelative = false;
} else {
this.showMNRelative = false;
this.showPNRelative = false;
this.showSNRelative = false;
this.showFNRelative = false;
this.showDianNRelative = false;
this.showRelative = true;
}
},
toggleFNRelative() {
if (!this.showFNRelative) {
this.showRelative = false;
this.showMNRelative = false;
this.showPNRelative = false;
this.showSNRelative = false;
this.showDianNRelative = false;
}
this.showFNRelative = !this.showFNRelative;
},
// 辨證关联器切换方法
toggleDianNRelative() {
if (!this.showDianNRelative) {
this.showRelative = false;
this.showMNRelative = false;
this.showPNRelative = false;
this.showSNRelative = false;
this.showFNRelative = false;
}
this.showDianNRelative = !this.showDianNRelative;
},
// 辨證名称HTML格式化方法 (
使用红色)
formatDiantagValueHTML(diantagArray) {
return diantagArray.map(tagObj => {
const name = tagObj.dianname || tagObj.name || '未命名標籤';
return `<span style="color: rgb(255, 0, 0); font
-weight: bold;">${this.escapeHtml(name)}</span>`;
}).join('；');
},
// 病态名称HTML格式化方法 (
使用橙色)
formatDntagValueHTML(dntagArray) {
return dntagArray.map(tagObj => {
const name = tagObj.dnname || tagObj.name || '未命名標籤';
return `<span style="color: rgb(212, 107, 8); font
-weight: bold;">${this.escapeHtml(name)}</span>`;
}).join('；');
},
// 本草名称HTML格式化方法 (
使用绿色)
formatMntagValueHTML(mntagArray) {
return mntagArray.map(tagObj => {
const name = tagObj.mnname || tagObj.name || '未命名標籤';
return `<span style="color: rgb(0, 128, 0); font
-weight: bold;">${this.escapeHtml(name)}</span>`;
}).join('；');
},
// 方剂名称HTML格式化方法 (
使用紫色)
formatPntagValueHTML(pntagArray) {
return pntagArray.map(tagObj => {
const name = tagObj.pnname || tagObj.name || '未命名標籤';
return `<span style="color: rgb(128, 0, 128); font
-weight: bold;">${this.escapeHtml(name)}</span>`;
}).join('；');
},
// 出处名称HTML格式化方法 (
使用蓝色)
formatSntagValueHTML(sntagArray) {
return sntagArray.map(tagObj => {
const name = tagObj.snname || tagObj.name || '未命名標籤';
return `<span style="color: rgb(51, 102, 255); font
-weight: bold;">${this.escapeHtml(name)}</span>`;
}).join('；');
},
// 人物名称HTML格式化方法 (
使用棕色)
formatFntagValueHTML(fntagArray) {
return fntagArray.map(tagObj => {
const name = tagObj.fnname || tagObj.name || '未命名標籤';
return `<span style="color: #8B4513; font
-weight: bold;">${this.escapeHtml(name)}</span>`;
}).join('；');
},
escapeHtml(text) {
const map = {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": '''
};
return text.replace(/[&<>"']/g, m => map[m]);
},
saveState() {
const state = {
version: this.stateVersion,
currentPage: this.currentPage,
pageSize: this.pageSize,
searchQuery: this.searchQuery,
timestamp: new Date().getTime()
};
sessionStorage.setItem('mrviewerState', JSON.stringify(state));
},
restoreState() {
const savedState = sessionStorage.getItem('mrviewerState');
if (!savedState) return;
try {
const state = JSON.parse(savedState);
if (state.version !== this.stateVersion) return;
this.currentPage = state.currentPage || 1;
this.pageSize = state.pageSize || 1;
this.searchQuery = state.searchQuery || '';
this.inputPage = this.currentPage;
} catch (e) {
sessionStorage.removeItem('mrviewerState');
}
},
clearState() {
sessionStorage.removeItem('mrviewerState');
},
async fetchData() {
try {
// 获取原有数据
const api1Response = await fetch("MRInfo/?format=json");
this.api1Data = await api1Response.json();
const api2Response = await fetch("DNTag/?format=json");
this.api2Data = await api2Response.json();
const api3Response = await fetch("MNTag/?format=json");
this.api3Data = await api3Response.json();
const api4Response = await fetch("SNTag/?format=json");
this.api4Data = await api4Response.json();
const api5Response = await fetch("PNTag/?format=json");
this.api5Data = await api5Response.json();
const api6Response = await fetch("FNTag/?format=json");
this.api6Data = await api6Response.json();
// 辨證数据获取
const api7Response = await fetch("DiaNTag/?format=json");
this.api7Data = await api7Response.json();
// 本草名称列表
this.mnNames = this.api3Data.map(item => item.mnname).filter(name => name && name.trim());
this.mnNames.sort((a, b) => b.length
- a.length);
// 方剂名称列表
this.pnNames = this.api5Data.map(item => item.pnname).filter(name => name && name.trim());
this.pnNames.sort((a, b) => b.length
- a.length);
// 病态名称列表
this.dnNames = this.api2Data.map(item => item.dnname).filter(name => name && name.trim());
this.dnNames.sort((a, b) => b.length
- a.length);
// 出处名称列表
this.snNames = this.api4Data.map(item => item.snname).filter(name => name && name.trim());
this.snNames.sort((a, b) => b.length
- a.length);
// 人物名称列表
this.fnNames = this.api6Data.map(item => item.fnname).filter(name => name && name.trim());
this.fnNames.sort((a, b) => b.length
- a.length);
// 辨證名称列表
this.dianNames = this.api7Data.map(item => item.dianname).filter(name => name && name.trim());
this.dianNames.sort((a, b) => b.length
- a.length);
this.mergeData();
this.currentPage = 1;
this.inputPage = 1;
this.saveState();
} catch (error) {
console.error("獲取數據失敗:", error);
alert("數據加載失敗，請稍後重試");
}
},
mergeData() {
this.mergedData = this.api1Data.map((item) => {
const newItem = { ...item };
// 处理病态标签
if (newItem.dntag && Array.isArray(newItem.dntag)) {
newItem.dntag = newItem.dntag.map((tagId) => {
const matchedItem = this.api2Data.find(api2Item => api2Item.id === tagId);
return matchedItem || { id: tagId, dnname: "未找到匹配的數據" };
});
}
// 处理本草标签
if (newItem.mntag && Array.isArray(newItem.mntag)) {
newItem.mntag = newItem.mntag.map((tagId) => {
const matchedItem = this.api3Data.find(api3Item => api3Item.id === tagId);
return matchedItem || { id: tagId, mnname: "未找到匹配的數據" };
});
}
// 处理方剂标签
if (newItem.pntag && Array.isArray(newItem.pntag)) {
newItem.pntag = newItem.pntag.map((tagId) => {
const matchedItem = this.api5Data.find(api5Item => api5Item.id === tagId);
return matchedItem || { id: tagId, pnname: "未找到匹配的數據" };
});
}
// 处理出处标签
if (newItem.sntag && Array.isArray(newItem.sntag)) {
newItem.sntag = newItem.sntag.map((tagId) => {
const matchedItem = this.api4Data.find(api4Item => api4Item.id === tagId);
return matchedItem || { id: tagId, snname: "未找到匹配的數據" };
});
}
// 处理人物标签
if (newItem.fntag && Array.isArray(newItem.fntag)) {
newItem.fntag = newItem.fntag.map((tagId) => {
const matchedItem = this.api6Data.find(api6Item => api6Item.id === tagId);
return matchedItem || { id: tagId, fnname: "未找到匹配的數據" };
});
}
// 处理辨證标签
if (newItem.diantag && Array.isArray(newItem.diantag)) {
newItem.diantag = newItem.diantag.map((tagId) => {
const matchedItem = this.api7Data.find(api7Item => api7Item.id === tagId);
return matchedItem || { id: tagId, dianname: "未找到匹配的數據" };
});
}
return newItem;
});
// 初始化排序顺序
this.sortOrders = {};
if (this.mergedData.length > 0) {
Object.keys(this.mergedData[0]).forEach(key => {
this.sortOrders[key] = 1;
});
}
},
processFieldNames(item) {
const result = {};
for (const key in item) {
const newKey = this.fieldNames[key] || key;
result[newKey] = item[key];
}
return result;
},
formatValue(value, fieldName) {
if (value === null || value === undefined) return '';
// 醫案全文的高亮
if (fieldName === '醫案全文' && typeof value === 'string') {
let highlighted = this.highlightMatches(value, this.dnNames, 'rgb(212, 107, 8)');
highlighted = this.highlightMatches(highlighted, this.mnNames, 'rgb(0, 128, 0)');
highlighted = this.highlightMatches(highlighted, this.pnNames, 'rgb(128, 0, 128)');
highlighted = this.highlightMatches(highlighted, this.snNames, 'rgb(51, 102, 255)');
highlighted = this.highlightMatches(highlighted, this.fnNames, '#8B4513');
highlighted = this.highlightMatches(highlighted, this.dianNames, 'rgb(255, 0, 0)'); // 辨證高亮
return highlighted;
}
// 醫案出處字段
else if (fieldName === '醫案出處' && typeof value === 'string') {
return this.highlightMatches(value, this.snNames, 'rgb(51, 102, 255)');
}
// 醫案醫者字段
else if (fieldName === '醫案醫者' && typeof value === 'string') {
return this.highlightMatches(value, this.fnNames, '#8B4513');
}
if (typeof value === 'string' && value.startsWith('http')) {
return `<a href="${value}" target="_blank">${value}</a>`;
}
return value;
},
highlightMatches(text, words, color) {
if (!text || typeof text !== 'string' || words.length === 0) {
return text;
}
const pattern = new RegExp(
words
.map(name => name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))
.join('|'),
'gi'
);
return text.replace(pattern, match =>
`<span style="color: ${color}; font
-weight: bold;">${this.escapeHtml(match)}</span>`
);
},
prevPage() {
if (this.currentPage > 1) {
this.currentPage
--;
this.saveState();
}
},
nextPage() {
if (this.currentPage < this.totalPages) {
this.currentPage++;
this.saveState();
}
},
handlePageInput() {
clearTimeout(this.inputTimeout);
this.inputTimeout = setTimeout(() => {
this.goToPage();
this.saveState();
}, 300);
},
goToPage() {
if (this.inputPage === null || this.inputPage === undefined || this.inputPage === '') {
this.inputPage = this.currentPage;
return;
}
const page = parseInt(this.inputPage);
if (isNaN(page)) {
this.inputPage = this.currentPage;
return;
}
if (page < 1) {
this.currentPage = 1;
} else if (page > this.totalPages) {
this.currentPage = this.totalPages;
} else {
this.currentPage = page;
}
this.inputPage = this.currentPage;
}
},
mounted() {
this.restoreState();
this.fetchData();
},
activated() {
this.restoreState();
},
deactivated() {
this.saveState();
}
};
</script>
<style scoped>
.container {
max
-width: 1200px;
margin: 0px;
padding: 0px;
}
.control
-panel {
margin
-bottom: 0px;
display: flex;
flex
-wrap: wrap;
gap: 10px;
justify
-content: flex
-end;
align
-items: center;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background
-color: #ffd800ff;
z
-index: 999;
padding: 10px 20px;
box
-sizing: border
-box;
}
.content
-area {
position: fixed;
top: 56px;
bottom: 45px;
left: 0;
width: 70%;
background: white;
padding: 1px;
z
-index: 100;
overflow
-y: auto;
}
.relative
-area {
position: fixed;
top: 56px;
bottom: 45px;
right: 0;
width: 30%;
background: lightblue;
padding: 1px;
z
-index: 100;
overflow
-y: auto;
}
.refresh
-btn, .relative
-btn {
padding: 4px;
background
-color: #4CAF50;
color: white;
border: none;
border
-radius: 4px;
cursor: pointer;
}
.refresh
-btn:hover, .relative
-btn:hover {
background
-color: #45a049;
}
.search
-input {
padding: 8px;
border: 1px solid #ddd;
border
-radius: 4px;
flex
-grow: 1;
max
-width: 300px;
}
.pagination
-controls {
display: flex;
align
-items: center;
gap: 5px;
}
.page
-size
-select {
padding: 4px;
border
-radius: 4px;
width: 70px;
}
.page
-input {
width: 50px;
padding: 4px;
border: 1px solid #ddd;
border
-radius: 4px;
text
-align: center;
}
.horizontal
-records {
display: flex;
flex
-direction: column;
gap: 20px;
}
.record
-card {
border: 1px solid #ddd;
border
-radius: 4px;
overflow: hidden;
box
-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.record
-header {
padding: 12px 16px;
background
-color: #f5f5f5;
border
-bottom: 1px solid #ddd;
}
.record
-header h3 {
margin: 0;
font
-size: 1.1em;
}
.record
-body {
padding: 16px;
}
.record
-field {
display: flex;
margin
-bottom: 12px;
line
-height: 1.5;
}
.record
-field:last
-child {
margin
-bottom: 0;
}
.field
-name {
font
-weight: bold;
min
-width: 120px;
color: #555;
}
.field
-value {
flex
-grow: 1;
display: flex;
flex
-wrap: wrap;
gap: 8px;
}
.dntag
-value {
display: flex;
flex
-wrap: wrap;
gap: 8px;
}
.mntag
-value {
display: flex;
flex
-wrap: wrap;
gap: 8px;
color: #006400;
font
-weight: 500;
}
.pntag
-value {
display: flex;
flex
-wrap: wrap;
gap: 8px;
color: #800080;
font
-weight: 500;
}
.sntag
-value {
display: flex;
flex
-wrap: wrap;
gap: 8px;
color: #0094ff;
font
-weight: 500;
}
.fntag
-value {
display: flex;
flex
-wrap: wrap;
gap: 8px;
color: #8B4513;
font
-weight: 500;
}
/* 辨證名称样式 */
.diantag
-value {
display: flex;
flex
-wrap: wrap;
gap: 8px;
color: rgb(255, 0, 0);
font
-weight: 500;
}
.array
-value {
display: flex;
flex
-wrap: wrap;
gap: 8px;
}
.no
-data {
padding: 20px;
text
-align: center;
color: #666;
font
-style: italic;
}
button:disabled {
opacity: 0.5;
cursor: not
-allowed;
}
</style>
本文介绍了一种在百分比布局中使子元素高度依赖于父元素宽度的方法，通过设置子div的padding-bottom为百分比，可以轻松实现子元素高度为父元素宽度的百分比。
扫一扫
4850
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
