辭

pages/index.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-.h-screen.container.mx-auto.pt-32
+.h-screen.mx-auto.pt-32
   // 太极(hover时缓慢旋转动画) hover:animate-spin absolute top-0 right-0 bottom-0 left-0 rotate-90 bg-green-600
   div.duration-700.transition-all.overflow-hidden.transform.cursor-pointer(
     class="flex top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 fixed justify-center items-center"
@@ -19,6 +19,17 @@
       :class="stretch ? 'rounded-0 w-full h-1/2 left-0' : 'rounded-full w-32 h-32 left-1/4'"
     )
       div(class="bg-white rounded-full h-8 w-8 mix-blend-difference")
+      // write-orient-mixed write-vertical-right
+      div.transition-all(
+        class="bg-red absolute "
+        :class="stretch ? 'opacity-100 duration-1200' : 'opacity-0 duration-200'"
+      )
+        //p.font-bold.text-xl.text-right(v-for="item in 六十四卦" :key="item.卦") {{ item.辭 }}
+        p.font-bold.text-xl {{ 六十四卦[selectItem].辭 }}
+        ul
+          li(v-for="item in 六十四卦[selectItem].爻" :key="item") {{ item }}
+          li(v-if="六十四卦[selectItem].翼").text-gray-500 象曰: {{ 六十四卦[selectItem].翼.象 }}
+          li(v-if="六十四卦[selectItem].翼").text-gray-500 彖曰: {{ 六十四卦[selectItem].翼.彖 }}
     div.duration-700.transition-all(
       class="bg-black flex bottom-0 absolute justify-center items-center"
       :class="stretch ? 'rounded-0 w-full h-1/2 right-0' : 'rounded-full w-32 h-32 right-1/4'"
@@ -42,17 +53,17 @@
         :class="stretch ? 'w-full' : 'w-11'"
       )
         div.w-2.h-2.bg-black(v-if="x === '阴'")
-  // 卦辞 whitespace-pre-line
+  //// 卦辞 whitespace-pre-line
-  div.duration-700.transition-all.transform.cursor-pointer(
+  //div.duration-700.transition-all.transform.cursor-pointer(
-    class="max-h-1/2 p-12 top-0 right-0 left-0 overflow-hidden fixed"
+  //  class="max-h-1/2 p-12 top-0 right-0 left-0 overflow-hidden fixed"
-    :class="stretch ? 'opacity-100' : 'opacity-0'"
+  //  :class="stretch ? 'opacity-100' : 'opacity-0'"
-  )
+  //)
-    p.font-bold.text-xl(v-for="item in 六十四卦" :key="item.卦") {{ item.辭 }}
+  //  p.font-bold.text-xl(v-for="item in 六十四卦" :key="item.卦") {{ item.辭 }}
-    //p.font-bold.text-xl {{ 六十四卦[selectItem].辭 }}
+  //  //p.font-bold.text-xl {{ 六十四卦[selectItem].辭 }}
-    //ul
+  //  //ul
-    //  li(v-for="item in 六十四卦[selectItem].爻" :key="item") {{ item }}
+  //  //  li(v-for="item in 六十四卦[selectItem].爻" :key="item") {{ item }}
-    //  li(v-if="六十四卦[selectItem].翼").text-gray-500 象曰: {{ 六十四卦[selectItem].翼.象 }}
+  //  //  li(v-if="六十四卦[selectItem].翼").text-gray-500 象曰: {{ 六十四卦[selectItem].翼.象 }}
-    //  li(v-if="六十四卦[selectItem].翼").text-gray-500 彖曰: {{ 六十四卦[selectItem].翼.彖 }}
+  //  //  li(v-if="六十四卦[selectItem].翼").text-gray-500 彖曰: {{ 六十四卦[selectItem].翼.彖 }}
   // 六十四卦
   div.duration-700.transition-all.transform.cursor-pointer(
     class="flex fixed justify-center items-center"
@@ -126,39 +137,74 @@ const 六十四卦 = [
   {
     卦: "觀",
     辭: '觀，盥而不薦，有孚顒若。',
+    爻: ['初六，童觀，小人無咎，君子吝。', '六二，窺觀，利女貞。', '六三，觀我生，進退。', '六四，觀國之光，利用賓于王。', '九五，觀我生，君子無咎。', '上九，觀其生，君子無咎。'],
+    翼: { 象: '風行地上，觀。先王以省方觀民設教。', 彖: '觀，觀者觀也，觀而不薦，有孚顒若，下觀而化也。觀童觀，小人道也。窺觀女貞，亦可丑也。觀我生進退，未失道也。觀國之光，尚賓也。觀我生，觀民也。觀其生，志未平也。' }
   },
   {
     卦: "豫",
+    辭: '豫，利建侯行師。',
+    爻: ['初六，鳴豫，凶。', '六二，介于石，不終日，貞吉。', '六三，盱豫，悔。遲有悔。', '九四，由豫，大有得。勿疑。朋盍簪。', '六五，貞疾，恒不死。', '上六，冥豫，成有渝。無咎。'],
+    翼: { 象: '雷出地奮，豫。先王以作樂崇德，殷樂有功。', 彖: '豫，剛應而志行，順以動，豫。豫，順以動，故天地如之，而况建侯行師乎？天地以順動，故日月不過，而四時不忒。聖人以順動則刑罰清而民服。豫之時義大矣哉！' }
   },
   {
     卦: "晉",
+    辭: '晉，康侯用錫馬蕃庶，晝日三接。',
+    爻: ['初六，晉如摧如，貞吉。罔孚裕，無咎。', '六二，晉如愁如，貞吉。受茲介福，于其王母。', '六三，眾允，悔亡。', '九四，晉如鼫鼠，貞厲。', '六五，悔亡，失得勿恤。往吉，無不利。', '上九，晉其角，維用伐邑，厲吉，無咎，貞吝。'],
+    翼: { 象: '明出地上，晉。君子以自昭明德。', 彖: '晉，進也。明出地上，順而麗乎大明，柔進而上行。是以康侯用錫馬蕃庶，晝日三接也。' }
   },
   {
     卦: "萃",
+    辭: '萃，亨。王假有廟，利見大人，亨，利貞，用大牲吉，利有攸往。',
+    爻: ['初六，有孚不終，乃亂乃萃，若號一握為笑，勿恤，往無咎。', '六二，引吉，無咎，孚乃利用禴。', '六三，萃如嗟如，無攸利，往無咎，小吝。', '九四，大吉，無咎。', '九五，萃有位，無咎。匪孚，元永貞，悔亡。', '上六，齊萃，貞吉。'],
+    翼: { 象: '澤上於地，萃。君子以除戎器，戎不虞。', 彖: '萃，聚也。順以說，剛中而應，故聚也。王假有廟，致孝享也。利見大人亨，聚以正也。用大牲吉，利有攸往，順天命也。觀其所聚，而天地萬物之情可見矣。' }
   },
   {
     卦: "否",
+    辭: '否之匪人，不利君子貞，大往小來。',
+    爻: ['初六，拔茅茹以其彙，貞吉，亨。', '六二，包承，小人吉，大人否，亨。', '六三，包羞。', '九四，有命無咎，疇離祉。', '九五，休否，大人吉。其亡其亡，系于苞桑。', '上九，傾否，先否後喜。'],
+    翼: { 象: '天地不交，否。君子以儉德辟難，不可榮以祿。', 彖: '否之匪人，不利君子貞。大往小來，則是天地不交，而萬物不通也。上下不交，則其道窮也。否之時用大矣哉！' }
   },
   {
     卦: "謙",
+    辭: '謙，亨，君子有終。',
+    爻: ['初六，謙謙君子，用涉大川，吉。', '六二，鳴謙，貞吉。', '六三，勞謙，君子有終，吉。', '九四，無不利，撝謙。', '九五，不富以其鄰，利用侵伐，無不利。', '上六，鳴謙，利用行師，征邑國。'],
+    翼: { 象: '地中有水，謙。君子以裒多益寡，稱物平施。', 彖: '謙，亨，天道下濟而光明，地道卑而上行。天道亨，而謙以光，地道卑，而謙以德，聖人以此成其德。謙以成賢，亨以聖功。君子有終，則大德光，萬物資生而民心悅。' }
   },
   {
     卦: "艮",
+    辭: '艮其背，不獲其身，行其庭，不見其人，無咎。',
+    爻: ['初六，艮其趾，無咎，利永貞。', '六二，艮其腓，不拯其隨，其心不快。', '九三，艮其限，列其夤，厲薰心。', '六四，艮其身，無咎。', '六五，艮其輔，言有序，悔亡。', '上九，敦艮，吉。'],
+    翼: { 象: '兼山，艮。君子以思不出其位。', 彖: '艮其背，不獲其身，行其庭，不見其人，無咎。艮其反也，其道窮也。說以行陰，道以當也。' }
   },
   {
     卦: "蹇",
+    辭: '蹇，利西南，不利東北。利見大人，貞吉。',
+    爻: ['初六，往蹇來譽。', '六二，王臣蹇蹇，匪躬之故。', '九三，往蹇來反。', '六四，往蹇來連。', '九五，大蹇朋來。', '上六，往蹇來碩，吉，利見大人。'],
+    翼: { 象: '山上有水，蹇。君子以反身修德。', 彖: '蹇，難也，險在前也。見險而能止，知矣哉！蹇來蹇往，而不失其所，繼而說行，慶而無悔。君子之道，蹇蹇，而後慶。' }
   },
   {
     卦: "漸",
+    辭: '漸，女歸吉，利貞。',
+    爻: ['初六，鴻漸于幹，小子厲，有言，無咎。', '六二，鴻漸于磐，飲食衎衎，吉。', '九三，鴻漸于陸，夫征不復，婦孕不育，凶。利禦寇。', '六四，鴻漸于木，或得其桷，無咎。', '九五，鴻漸于陵，婦三歲不孕，終莫之勝，吉。', '上九，鴻漸于陸，其羽可用為儀，吉。'],
+    翼: { 象: '山上有木，漸。君子以居賢德，善俗。', 彖: '漸之進也，女歸吉也。進得位，往有功也。進以正，可以正邦也。其位剛，得中也。止而巽，動不窮也。' }
   },
   {
     卦: "小過",
+    辭: '小過，亨，利貞，可小事，不可大事。飛鳥遺之音，不宜上，宜下，大吉。',
+    爻: ['初六，飛鳥以凶。', '六二，過其祖，遇其妣，不及其君，遇其臣，無咎。', '九三，弗過防之，從或戕之，凶。', '九四，無咎，弗過遇之。往厲必戒，勿用永貞。', '六五，密雲不雨，自我西郊，公弋取彼在穴。', '上六，弗遇過之，飛鳥離之，凶，是謂災眚。'],
+    翼: { 象: '山上有雷，小過。君子以行過乎恭，喪過乎哀，用過乎儉。', 彖: '小過，小者過而亨也。過以利貞，與時行也。柔得中，是以小事吉也。剛失位而不中，是以不可大事也。有飛鳥之象焉，有飛鳥遺之音，不宜上宜下，大吉，上逆而下順也。' }
   },
   {
     卦: "旅",
+    辭: '旅，小亨，旅貞吉。',
+    爻: ['初六，旅瑣瑣，斯其所取災。', '六二，旅即次，懷其資，得童僕貞。', '九三，旅焚其次，喪其童僕，貞厲。', '九四，旅于處，得其資斧，我心不快。', '六五，射雉，一矢亡，終以譽命。', '上九，鳥焚其巢，旅人先笑后號咷。喪牛于易，凶。'],
+    翼: { 象: '山上有火，旅。君子以明慎用刑，而不留獄。', 彖: '旅，小亨，柔得中乎外，而順乎剛，止而且澹，是以小亨旅貞吉也。旅之時義大矣哉！' }
   },
   {
     卦: "咸",
+    辭: '咸，亨，利貞，取女吉。',
+    爻: ['初六，咸其拇。', '六二，咸其腓，凶，居吉。', '九三，咸其股，執其隨，往吝。', '九四，貞吉，悔亡，憧憧往來，朋從爾思。', '九五，咸其脢，無悔。', '上六，咸其輔頰舌。'],
+    翼: { 象: '山上有水，咸。君子以虛受人。', 彖: '咸，感也，柔上而剛下，二氣感應以相與，止而說，男下女，是以亨利貞取女吉也。天地感而萬物化生，聖人感人心而天下和平，觀其所感，而天地萬物之情可見矣。' }
   },
   {
     卦: "遯",