<!DOCTYPE html>

<head>

<title>十不善业果报差别 - 交互式可视化</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: 'Microsoft YaHei', 'SimSun', serif;

background: #f8f3e6 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" opacity="0.05"><rect fill="none" stroke="%238b0000" stroke-width="2" x="10" y="10" width="80" height="80" rx="10" ry="10"/></svg>');

color: #3e2723;

line-height: 1.8;

padding: 20px;

}

.container {

max-width: 1400px;

margin: 0 auto;

background: rgba(255, 253, 248, 0.92);

border-radius: 8px;

box-shadow: 0 8px 32px rgba(139, 0, 0, 0.15);

padding: 30px;

border: 1px solid rgba(139, 0, 0, 0.1);

position: relative;

overflow: hidden;

}

.container:before {

content: "";

position: absolute;

top: 0;

left: 0;

right: 0;

height: 4px;

background: linear-gradient(90deg, #8b0000, #d4af37, #8b0000);

}

h1 {

text-align: center;

color: #8b0000;

margin-bottom: 40px;

font-size: 2.5em;

font-weight: bold;

text-shadow: 1px 1px 2px rgba(0,0,0,0.1);

letter-spacing: 2px;

position: relative;

padding-bottom: 15px;

}

h1:after {

content: "";

position: absolute;

bottom: 0;

left: 40%;

right: 40%;

height: 3px;

background: linear-gradient(90deg, transparent, #d4af37, transparent);

}

.nav-tabs {

display: flex;

justify-content: center;

margin-bottom: 30px;

border-bottom: 2px solid #8b0000;

flex-wrap: wrap;

}

.nav-tab {

padding: 12px 24px;

margin: 0 5px 10px;

background: transparent;

border: none;

cursor: pointer;

font-size: 16px;

font-weight: bold;

color: #8b4513;

transition: all 0.3s ease;

position: relative;

border-radius: 4px 4px 0 0;

font-family: 'SimSun', serif;

}

.nav-tab:hover {

background: rgba(139, 0, 0, 0.08);

color: #8b0000;

}

.nav-tab.active {

background: #8b0000;

color: #f8f3e6;

}

.nav-tab.active:after {

content: "";

position: absolute;

bottom: -2px;

left: 0;

right: 0;

height: 2px;

background: #8b0000;

}

.content-section {

display: none;

animation: fadeIn 0.5s ease-in;

}

.content-section.active {

display: block;

}

@keyframes fadeIn {

from { opacity: 0; transform: translateY(20px); }

to { opacity: 1; transform: translateY(0); }

}

/* 果报轮盘样式 */

.wheel-container {

display: flex;

justify-content: center;

align-items: center;

min-height: 600px;

position: relative;

}

.wheel {

width: 500px;

height: 500px;

border-radius: 50%;

position: relative;

background: #f8f3e6;

box-shadow: 0 0 30px rgba(139, 0, 0, 0.2);

border: 8px double #8b0000;

}

.wheel-center {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

width: 120px;

height: 120px;

background: #8b0000;

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

color: #f8f3e6;

font-weight: bold;

font-size: 18px;

text-align: center;

box-shadow: 0 0 20px rgba(0,0,0,0.3);

z-index: 10;

border: 2px solid #d4af37;

font-family: 'SimSun', serif;

}

.wheel-sector {

position: absolute;

width: 50%;

height: 50%;

transform-origin: right bottom;

cursor: pointer;

transition: all 0.3s ease;

}

.wheel-sector:hover {

transform: scale(1.05);

z-index: 5;

}

.sector-content {

position: absolute;

top: 20%;

left: 20%;

width: 60%;

height: 60%;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

text-align: center;

font-size: 14px;

font-weight: bold;

color: #3e2723;

background: rgba(255, 253, 248, 0.85);

border-radius: 50%;

padding: 10px;

border: 1px solid rgba(139, 0, 0, 0.2);

box-shadow: 0 4px 12px rgba(0,0,0,0.1);

}

.sector-title {

font-size: 16px;

margin-bottom: 5px;

color: #8b0000;

font-weight: bold;

font-family: 'SimSun', serif;

}

/* 网络图样式 */

.network-container {

width: 100%;

height: 600px;

position: relative;

overflow: hidden;

background: #f8f3e6;

border: 1px solid rgba(139, 0, 0, 0.15);

border-radius: 4px;

box-shadow: inset 0 0 20px rgba(139, 0, 0, 0.05);

}

.network-node {

position: absolute;

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

text-align: center;

font-weight: bold;

cursor: pointer;

transition: all 0.3s ease;

box-shadow: 0 4px 15px rgba(0,0,0,0.2);

border: 2px solid rgba(255, 253, 248, 0.7);

}

.network-node:hover {

transform: scale(1.1);

z-index: 10;

box-shadow: 0 6px 20px rgba(0,0,0,0.3);

}

.node-central {

width: 120px;

height: 120px;

background: #8b0000;

color: #f8f3e6;

font-size: 16px;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

font-family: 'SimSun', serif;

}

.node-primary {

width: 100px;

height: 100px;

background: #b8860b;

color: #3e2723;

font-size: 14px;

font-family: 'SimSun', serif;

}

.node-secondary {

width: 80px;

height: 80px;

background: #daa520;

color: #3e2723;

font-size: 12px;

font-family: 'SimSun', serif;

}

.node-detail {

width: 60px;

height: 60px;

background: #f0e68c;

color: #3e2723;

font-size: 10px;

font-family: 'SimSun', serif;

}

.network-line {

position: absolute;

background: #8b0000;

height: 2px;

transform-origin: left center;

opacity: 0.6;

transition: all 0.3s ease;

}

/* 对比表格样式 */

.comparison-table {

width: 100%;

border-collapse: collapse;

margin: 20px 0;

background: #f8f3e6;

box-shadow: 0 4px 15px rgba(0,0,0,0.08);

border-radius: 4px;

overflow: hidden;

border: 1px solid rgba(139, 0, 0, 0.1);

}

.comparison-table th,

.comparison-table td {

padding: 15px;

text-align: left;

border-bottom: 1px solid rgba(139, 0, 0, 0.1);

}

.comparison-table th {

background: #8b0000;

color: #f8f3e6;

font-weight: bold;

font-size: 16px;

font-family: 'SimSun', serif;

}

.comparison-table tr:nth-child(even) {

background: rgba(139, 0, 0, 0.03);

}

.comparison-table tr:hover {

background: rgba(139, 0, 0, 0.08);

}

.comparison-table td {

vertical-align: top;

}

.karmic-type {

font-weight: bold;

color: #8b0000;

font-family: 'SimSun', serif;

}

.fruit-type {

display: inline-block;

padding: 4px 8px;

border-radius: 4px;

font-size: 12px;

font-weight: bold;

margin-right: 5px;

font-family: 'SimSun', serif;

}

.fruit-1 { background: #ff6b6b; color: white; }

.fruit-2 { background: #4ecdc4; color: white; }

.fruit-3 { background: #45b7d1; color: white; }

/* 流程图样式 */

.flowchart {

display: flex;

flex-direction: column;

align-items: center;

padding: 20px;

}

.flow-level {

display: flex;

justify-content: center;

margin: 20px 0;

flex-wrap: wrap;

}

.flow-node {

background: #8b0000;

color: #f8f3e6;

padding: 15px 25px;

border-radius: 4px;

margin: 10px;

text-align: center;

position: relative;

cursor: pointer;

transition: all 0.3s ease;

box-shadow: 0 4px 12px rgba(0,0,0,0.15);

border: 1px solid rgba(212, 175, 55, 0.3);

font-family: 'SimSun', serif;

min-width: 120px;

}

.flow-node:hover {

transform: translateY(-5px);

box-shadow: 0 8px 20px rgba(0,0,0,0.25);

background: #6a0000;

}

.flow-arrow {

width: 0;

height: 0;

border-left: 15px solid transparent;

border-right: 15px solid transparent;

border-top: 20px solid #8b0000;

margin: 10px auto;

}

.flow-branch {

display: flex;

justify-content: space-around;

width: 100%;

max-width: 800px;

margin: 20px 0;

}

.branch-node {

background: #b8860b;

color: #3e2723;

padding: 12px 20px;

border-radius: 4px;

text-align: center;

margin: 5px;

cursor: pointer;

transition: all 0.3s ease;

border: 1px solid rgba(139, 0, 0, 0.2);

font-family: 'SimSun', serif;

flex: 1;

max-width: 200px;

}

.branch-node:hover {

background: #8b0000;

color: #f8f3e6;

transform: scale(1.05);

}

/* 信息面板 */

.info-panel {

background: rgba(139, 0, 0, 0.03);

border-left: 4px solid #8b0000;

padding: 20px;

margin: 20px 0;

border-radius: 0 4px 4px 0;

box-shadow: 0 4px 12px rgba(0,0,0,0.05);

border: 1px solid rgba(139, 0, 0, 0.1);

border-left: 4px solid #8b0000;

}

.info-title {

color: #8b0000;

font-weight: bold;

font-size: 18px;

margin-bottom: 10px;

font-family: 'SimSun', serif;

display: flex;

align-items: center;

}

.info-title:before {

content: "•";

margin-right: 8px;

color: #d4af37;

font-size: 24px;

}

.info-content {

color: #5d4037;

line-height: 1.8;

}

/* 响应式设计 */

@media (max-width: 768px) {

.wheel {

width: 350px;

height: 350px;

}

.sector-content {

font-size: 12px;

}

.nav-tab {

padding: 8px 16px;

font-size: 14px;

}

.comparison-table {

font-size: 14px;

}

.comparison-table th,

.comparison-table td {

padding: 10px;

}

/* 工具提示 */

.tooltip {

position: fixed;

background: rgba(62, 39, 35, 0.95);

color: #f8f3e6;

padding: 10px 15px;

border-radius: 4px;

font-size: 14px;

pointer-events: none;

opacity: 0;

transition: opacity 0.3s ease;

z-index: 1000;

max-width: 300px;

text-align: center;

box-shadow: 0 4px 20px rgba(0,0,0,0.3);

border: 1px solid rgba(212, 175, 55, 0.3);

font-family: 'SimSun', serif;

line-height: 1.6;

}

.tooltip.show {

opacity: 1;

}

.tooltip:after {

content: "";

position: absolute;

top: 100%;

left: 50%;

margin-left: -5px;

border-width: 5px;

border-style: solid;

border-color: rgba(62, 39, 35, 0.95) transparent transparent transparent;

}

</style>

</head>

<body>

<h1>第四十六课：十不善业果报差别</h1>

</div>

十不善业<br>果报差别

</div>

点击轮盘上的各个扇形区域，查看不同业力的具体果报。轮盘分为三个层次：异熟果（决定投生道）、等流果（个人遭遇）、增上果（环境影响）。

</div>

</div>

<div class="info-title">网络图说明</div>

此图展示了十不善业、十善业与三种果报之间的复杂关系。点击节点可查看详细信息，连接线表示因果关系。中心节点为"业力"，外围节点分别为具体的业行和果报。

</div>

<thead>

<tr>

<th>十不善业果报</th>

<th>十善业果报</th>

</tr>

</thead>

<tbody>

<tr>

<td>

<span class="fruit-type fruit-3">增上：饮食药果微少无力</span>

</td>

<td>

</td>

<td>《瑜伽师地论·本地分》</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

</tr>

<tr>

<td>

<span class="fruit-type fruit-3">增上：农事船业不兴盛</span>

</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>

<span class="fruit-type fruit-2">等流：人际关系和谐</span><br>

</td>

</tr>

</tbody>

</table>

</div>

意乐（动机）<br>

贪嗔痴三毒

</div>

加行（行为）<br>

身口意三业

</div>

究竟（完成）<br>

业力形成

</div>

异熟果<br>

投生何道

</div>

等流果<br>

个人遭遇

</div>

增上果<br>

环境影响

</div>

<div class="info-title">点击节点查看详细说明</div>

业报的形成需要经历意乐、加行、究竟三个阶段，最终感召异熟、等流、增上三种果报。

</div>

<div class="info-title">业的种类详解</div>

<p><strong>1. 引满差别：</strong>引业如画师作画，决定投生何道；满业如弟子着色，决定具体境遇。</p>

<p><strong>2. 定不定受：</strong>故思而作、已积聚者定受；不故思作、未积聚者不定受。</p>

<p><strong>3. 决定受时期：</strong>现法受（现世受报）、顺生受（来世受报）、顺后受（后世受报）。</p>

</div>

<div class="info-title">异熟果三特征</div>

<p><strong>1. 异时而熟：</strong>因与果时间不同，如春天播种，秋天收获。</p>

<p><strong>2. 异类而熟：</strong>因通三性，果唯无记。如善业感人天，但人天本身非善非恶。</p>

<p><strong>3. 变异而熟：</strong>从因到果有变化过程，如种子发芽、成长、结果。</p>

</div>

<div class="info-title">十善业道修习</div>

<p><strong>思惟过患：</strong>深刻认识十不善业的过患，产生坚决断除之心。</p>

<p><strong>防护加行：</strong>在日常生活中积极防护，避免造作不善业。</p>

<p><strong>究竟圆满：</strong>在任何情况下都不起不善心，不造不善业。</p>

<p><strong>反黑为白：</strong>十善业就是十不善业的反面，防护不善即是行善。</p>

</div>

// 数据定义

const karmicData = {

'杀生': {

'异熟果': '大者感地狱，中者感饿鬼，小者感畜生',

'等流果': '寿命短促，多疾病',

'增上果': '饮食药果微少无力'

'偷盗': {

'异熟果': '三恶道',

'等流果': '受用匮乏，贫穷',

'增上果': '常值旱潦，果实鲜少'

'邪淫': {

'异熟果': '三恶道',

'等流果': '妻不贞良，眷属不和',

'增上果': '污泥粪秽，环境污浊'

'妄语': {

'异熟果': '三恶道',

'等流果': '多遭毁谤，言而无信',

'增上果': '农事船业不兴盛'

'两舌': {

'异熟果': '三恶道',

'等流果': '亲朋乖离，人际关系差',

'增上果': '地不平坦，高下难行'

'恶口': {

'异熟果': '三恶道',

'等流果': '闻违意声，常听恶语',

'增上果': '地多株杌、荆棘、瓦石'

'绮语': {

'异熟果': '三恶道',

'等流果': '他不受语，言语无分量',

'增上果': '果不结实，非时结果'

'贪心': {

'异熟果': '三恶道',

'等流果': '贪嗔痴增上，贪心更重',

'增上果': '一切盛事日夜衰微'

'嗔心': {

'异熟果': '三恶道',

'等流果': '嗔心增上，更易发怒',

'增上果': '多有疫疠、灾害、兵戈'

'邪见': {

'异熟果': '三恶道',

'等流果': '愚痴增上，智慧不开',

'增上果': '胜妙生源渐见隐没'

}

};

const flowDetails = {

'intention': {

title: '意乐（动机）阶段',

content: '一切业力始于动机。以贪嗔痴三毒为基础，产生不善动机。动机强弱决定业力大小：上品烦恼造大业，中品烦恼造中业，下品烦恼造小业。'

'action': {

title: '加行（行为）阶段',

content: '将动机付诸行动。身业：杀生、偷盗、邪淫；口业：妄语、两舌、恶口、绮语；意业：贪心、嗔心、邪见。行为方式、对象不同，业力轻重有别。'

'completion': {

title: '究竟（完成）阶段',

content: '行为圆满完成，业力正式形成。此时业力已具备感召果报的力量，只待因缘成熟即可受报。业力会持续增长，除非遇到对治。'

'mature': {

title: '异熟果',

content: '决定投生何道的果报。十不善业感召三恶道，十善业感召三善道。业力大小决定投生具体哪一道：大业感地狱，中业感饿鬼，小业感畜生。'

'similar': {

title: '等流果',

content: '与因相似的果报。杀生者短命，偷盗者贫穷，邪淫者眷属不和，妄语者多遭诽谤，两舌者亲朋乖离，恶口者常闻恶语，绮语者言语无力，贪嗔痴者三毒增盛。'

'enhance': {

title: '增上果',

content: '影响外在环境的果报。杀生者感饮食缺乏，偷盗者感自然灾害，邪淫者感环境污浊，妄语者感事业不顺，两舌者感地形不平，恶口者感环境粗劣，绮语者感农作物异常，贪心者感资源衰微，嗔心者感灾害频发，邪见者感资源枯竭。'

}

};

// 初始化轮盘

function initWheel() {

const wheel = document.getElementById('karmicWheel');

const sectors = Object.keys(karmicData);

const angleStep = 360 / sectors.length;

sectors.forEach((sector, index) => {

const sectorElement = document.createElement('div');

sectorElement.className = 'wheel-sector';

sectorElement.style.transform = `rotate(${index * angleStep}deg)`;

sectorElement.style.clipPath = `polygon(50% 50%, 50% 0%, ${50 + 50 * Math.cos((angleStep - 90) * Math.PI / 180)}% ${50 + 50 * Math.sin((angleStep - 90) * Math.PI / 180)}%)`;

const content = document.createElement('div');

content.className = 'sector-content';

content.innerHTML = `

<div class="sector-title">${sector}</div>

<div style="font-size: 12px;">点击查看详情</div>

sectorElement.appendChild(content);

sectorElement.addEventListener('click', () => showSectorDetail(sector));

wheel.appendChild(sectorElement);

});

}

// 显示扇形详情

function showSectorDetail(sector) {

const data = karmicData[sector];

let content = `<strong>${sector}的果报：</strong><br><br>`;

Object.keys(data).forEach(fruit => {

content += `<span style="color: #8b0000; font-weight: bold;">${fruit}：</span>${data[fruit]}<br><br>`;

});

showTooltip(content, event);

}

// 初始化网络图

function initNetwork() {

const container = document.getElementById('networkGraph');

const centerX = container.offsetWidth / 2;

const centerY = container.offsetHeight / 2;

// 中心节点

const centerNode = document.createElement('div');

centerNode.className = 'network-node node-central';

centerNode.style.left = `${centerX - 60}px`;

centerNode.style.top = `${centerY - 60}px`;

centerNode.textContent = '业力';

centerNode.addEventListener('click', () => showTooltip('一切果报皆由业力所感', event));

container.appendChild(centerNode);

// 主要节点

const primaryNodes = ['十不善业', '十善业', '异熟果', '等流果', '增上果'];

const primaryRadius = 200;

primaryNodes.forEach((node, index) => {

const angle = (index * 72 - 90) * Math.PI / 180;

const x = centerX + primaryRadius * Math.cos(angle);

const y = centerY + primaryRadius * Math.sin(angle);

const nodeElement = document.createElement('div');

nodeElement.className = 'network-node node-primary';

nodeElement.style.left = `${x - 50}px`;

nodeElement.style.top = `${y - 50}px`;

nodeElement.textContent = node;

nodeElement.addEventListener('click', () => showPrimaryDetail(node));

container.appendChild(nodeElement);

// 连接线

const line = document.createElement('div');

line.className = 'network-line';

const distance = Math.sqrt(Math.pow(x - centerX, 2) + Math.pow(y - centerY, 2));

const angle2 = Math.atan2(y - centerY, x - centerX) * 180 / Math.PI;

line.style.width = `${distance - 60}px`;

line.style.left = `${centerX}px`;

line.style.top = `${centerY}px`;

line.style.transform = `rotate(${angle2}deg)`;

container.appendChild(line);

});

// 次级节点

const secondaryNodes = Object.keys(karmicData);

const secondaryRadius = 120;

secondaryNodes.forEach((node, index) => {

const angle = (index * 36 - 90) * Math.PI / 180;

const x = centerX + secondaryRadius * Math.cos(angle);

const y = centerY + secondaryRadius * Math.sin(angle);

const nodeElement = document.createElement('div');

nodeElement.className = 'network-node node-secondary';

nodeElement.style.left = `${x - 40}px`;

nodeElement.style.top = `${y - 40}px`;

nodeElement.textContent = node;

nodeElement.addEventListener('click', () => showSecondaryDetail(node));

container.appendChild(nodeElement);

});

}

// 显示主要节点详情

function showPrimaryDetail(node) {

let content = '';

switch(node) {

case '十不善业':

content = '包括身三（杀生、偷盗、邪淫）、口四（妄语、两舌、恶口、绮语）、意三（贪心、嗔心、邪见）';

break;

case '十善业':

content = '防护十不善业即是十善业，包括不杀、不盗、不邪淫、不妄语、不两舌、不恶口、不绮语、不贪、不嗔、不邪见';

break;

case '异熟果':

content = '决定投生何道的果报，十不善业感三恶道，十善业感三善道';

break;

case '等流果':

content = '与因相似的果报，如杀生者短命，偷盗者贫穷等';

break;

case '增上果':

content = '影响外在环境的果报，如杀生者感饮食缺乏等';

break;

}

showTooltip(content, event);

}

// 显示次级节点详情

function showSecondaryDetail(node) {

const data = karmicData[node];

let content = `<strong>${node}：</strong><br>`;

Object.keys(data).forEach(fruit => {

content += `<br><span style="color: #8b0000;">${fruit}：</span>${data[fruit]}`;

});

showTooltip(content, event);

}

// 显示流程详情

function showFlowDetail(stage) {

const detail = flowDetails[stage];

const panel = document.getElementById('flowDetail');

panel.innerHTML = `

<div class="info-title">${detail.title}</div>

<div class="info-content">${detail.content}</div>

}

// 显示工具提示

function showTooltip(content, event) {

const tooltip = document.getElementById('tooltip');

tooltip.innerHTML = content;

tooltip.classList.add('show');

// Position tooltip above the cursor

const x = event.clientX;

const y = event.clientY;

tooltip.style.left = `${x}px`;

tooltip.style.top = `${y - tooltip.offsetHeight - 10}px`;

// Adjust if too close to the top

if (y - tooltip.offsetHeight - 10 < 0) {

tooltip.style.top = `${y + 20}px`;

}

// Hide after 5 seconds

setTimeout(() => {

tooltip.classList.remove('show');

}, 5000);

// Hide on next click

document.addEventListener('click', hideTooltip);

}

// 隐藏工具提示

function hideTooltip() {

const tooltip = document.getElementById('tooltip');

tooltip.classList.remove('show');

document.removeEventListener('click', hideTooltip);

}

// 切换内容区域

function showSection(sectionId) {

// 隐藏所有内容

const sections = document.querySelectorAll('.content-section');

sections.forEach(section => section.classList.remove('active'));

// 显示选中的内容

document.getElementById(sectionId).classList.add('active');

// 更新标签状态

const tabs = document.querySelectorAll('.nav-tab');

tabs.forEach(tab => tab.classList.remove('active'));

event.target.classList.add('active');

// 初始化相应的可视化

if (sectionId === 'network' && !document.getElementById('networkGraph').hasChildNodes()) {

setTimeout(initNetwork, 100);

} else if (sectionId === 'wheel' && !document.getElementById('karmicWheel').querySelector('.wheel-sector')) {

setTimeout(initWheel, 100);

}

// 页面加载完成后初始化

window.addEventListener('load', function() {

initWheel();

// 添加鼠标移动事件监听器

document.addEventListener('mousemove', function(e) {

const tooltip = document.getElementById('tooltip');

if (tooltip.classList.contains('show')) {

// Update position if tooltip is shown

const x = e.clientX;

const y = e.clientY;

tooltip.style.left = `${x}px`;

tooltip.style.top = `${y - tooltip.offsetHeight - 10}px`;

// Adjust if too close to the top

if (y - tooltip.offsetHeight - 10 < 0) {

tooltip.style.top = `${y + 20}px`;

}

});

// 窗口大小改变时重新绘制网络图

window.addEventListener('resize', function() {

const networkGraph = document.getElementById('networkGraph');

if (networkGraph.hasChildNodes()) {

networkGraph.innerHTML = '';

setTimeout(initNetwork, 100);

}

});

</script>

</body>

</html>