feats

package.json

@@ -14,6 +14,7 @@
     "v-viewer": "^3.0.10",
     "viewerjs": "1.9.0",
     "vue": "^3.2.37",
+    "vue-i18n": "9",
     "vue-router": "4"
   },
   "devDependencies": {

src/i18n/en.js

@@ -0,0 +1,25 @@
+
+export default {
+  section1: {
+    p1: 'From 2014 to date,',
+    p2: 'A small purple flower has been lit up in 14 countries around the world.',
+  },
+  section2: {
+    p1: 'Violet Orychopragmus has become the language of peace, sending a call for peace to the world from Nanjing. In China, Finland, Turkey, Germany, the United Kingdom, Switzerland, the United States, Canada, Japan, Korea, Malaysia, Australia, New Zealand and Singapore, the violet orychopragmus has been lit up in these countries to sow the seeds of peace.',
+    p2: 'Nearly 200,000 violet pins were worn by people.'
+  },
+  section3: {
+    p1: 'In 2014, NJTV made violet pins out of the plant violet orychopragmus and distributed them to the public. 200,000 people have joined the Violet Orychopragmus Campaign over the past nine years, wearing the pins near their hearts.',
+    P2: 'In the hearts of 200 million people, the vision of peace was sown and spread.'
+  },
+  section4: {
+    P1: 'In 2014, we came to you for the first time under the name Violet Orychopragmus. We sowed the seeds of peace by visiting burial sites, launching the memorial website of Purple Mourning for the public and distributing the violet pins.',
+    P2: 'In 2015, we solicited and collected more than 3,000 family stories through the Family Lineage 1937 campaign.',
+    P3: 'In 2016, 2 million people planted violet orychopragmus online, applied violet orychopragmus avatars, and hand-wrote family history stories.',
+    P4: 'In 2017, 5 burial sites and 12.13 km relay ride were held to allow the concept of peace to take root and spread in this city that has experienced trauma and ordeal.',
+    P5: 'In 2018, the online violet orychopragmus campaign was carried out in more than ten cities around the world. And the image of violet orychopragmus can be seen in every corner of the world.',
+    P6: 'In 2019, the number of viewers of #Violet Orychopragmus has exceeded 150 million, and more people are joining this warm, meaningful and sentimental event.',
+    P7: 'In 2020, the number of violet orychopragmus campaign related videos were played 30 million times on Douyin.',
+    P8: 'In 2021, more than 2,000 posters were made to carry children\'s memories of history and prayers for peace.'
+  }
+}

src/i18n/index.js

@@ -0,0 +1,13 @@
+
+import { createI18n } from 'vue-i18n';
+import zh from './zh';
+import en from './en';
+
+const i18n = createI18n({
+  legacy: false,
+  globalInjection: true,
+  locale: 'zh',
+  messages: {zh, en}
+})
+
+export default i18n;

src/i18n/zh.js

@@ -0,0 +1,25 @@
+
+export default {
+  section1: {
+    p1: '2014年至今，',
+    p2: '一朵紫色小花在全球14个国家被点亮；',
+  },
+  section2: {
+    p1: '紫金草已成为和平的语言，从南京向世界传递出和平的呼唤。中国、芬兰、土耳其、德国、英国、瑞士、美国、加拿大、日本、韩国、马拉西亚、澳大利亚、新西兰、新加坡，紫金草在14个国家被点亮，播撒和平的种子。',
+    p2: '近20万枚紫金草徽章佩戴在了人们的心口；'
+  },
+  section3: {
+    p1: '2014年，南京广电集团以“紫金草”为原型，制作紫金草徽章发放给市民。9年来，20万人加入“紫金草行动”，把紫金草徽章佩戴在离心脏最近的地方。',
+    P2: '在2亿人心中，和平的愿景被播撒。'
+  },
+  section4: {
+    P1: '2014年，我们第一次以“紫金草”的名字，来到大家身边。我们寻访丛葬地，开设“紫色的哀思”公祭网页，发放紫金草徽章，播撒和平的种子',
+    P2: '2015年，“家脉1937”家史故事征集，3000多个家史故事讲述历史',
+    P3: '2016年，200万人线上种植紫金草、更换紫金草头像、手写家史故事',
+    P4: '2017年，5处丛葬地，12.13公里接力骑行，让和平理念在这座经历过伤痛的城市扎根、传播',
+    P5: '2018年，线上紫金草活动在全球十多个城市开展，世界个各个角落，都有紫金草的身影。',
+    P6: '2019年，#紫金草#话题阅读数突破1.5亿，越来越多的人一起做这件有温暖、有意义、有情怀的事。',
+    P7: '2020年，紫金草行动抖音话题播放量超3000万',
+    P8: '2021年，2000多幅公益海报，承载着孩子们对历史的铭记，对和平的祈愿。'
+  }
+}

src/main.js

@@ -6,6 +6,7 @@ import App from './App.vue'
 import store from './store'
 import wxsdk from './utils/wx'
 import router from './router'
+import i18n from './i18n'
 
 // const { share } = wxsdk(location.href)
 
@@ -13,6 +14,7 @@ const app = createApp(App);
 app.use(VueViewer);
 app.use(store);
 app.use(router);
+app.use(i18n);
 app.mount('#app');
 
 // share();

src/pages/pg1/index.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="pg pg1" parallax>
-    <div class="logo" parallax-offset="200" parallax-out='0' parallax-in='100'>
+    <div class="logo" parallax-offset="200" parallax-out='0' parallax-in='100' @click="onClick">
       <img src="/images/pg1/紫金草行动logo.png" alt="">
     </div>
     <div class="content">
-      <p>2014年至今</p>
+      <p>{{t('section1.p1')}}</p>
       <p>一朵紫色小花</p>
       <p>在全球<strong>14个国家</strong>被点亮</p>
       <p><strong>近20万枚</strong>紫金草徽章</p>
@@ -21,6 +21,28 @@
   </div>
 </template>
 
+<script setup>
+// import { useModel } from '@zjxpcyc/vue-tiny-store';
+import { useI18n } from 'vue-i18n';
+
+// const [locale] = useModel('i18n');
+
+const { t, locale } = useI18n();
+
+let i = 0;
+
+const onClick = () => {
+  if (i % 2 === 1) {
+    locale.value = 'en';
+  } else {
+    locale.value = 'zh';
+  }
+
+  i += 1;
+}
+
+</script>
+
 
 <style lang="less" scoped>
 .pg1 {

src/store/index.js

@@ -1,32 +1,14 @@
 import { ref } from 'vue';
 import createStore from '@zjxpcyc/vue-tiny-store';
 
-const usePoem = () => {
-  const content = ref()
-
-  const update = (val) => {
-    content.value = val;
-  }
-
-  return [
-    content,
-    update,
-  ]
-};
-
-const useQRCode = () => {
-  const content = ref()
-
-  const update = (val) => {
-    content.value = val;
-  }
+const useFoo = () => {
+  const foo = ref('');
 
   return [
-    content,
-    update,
+    foo
   ]
 };
 
-const store = createStore({ poem: usePoem, qrcode: useQRCode });
+const store = createStore({ foo: useFoo });
 
 export default store;

yarn.lock

@@ -17,6 +17,44 @@
   resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.15.15.tgz#32c65517a09320b62530867345222fde7794fbe1"
   integrity sha512-lhz6UNPMDXUhtXSulw8XlFAtSYO26WmHQnCi2Lg2p+/TMiJKNLtZCYUxV4wG6rZMzXmr8InGpNwk+DLT2Hm0PA==
 
+"@intlify/core-base@9.2.2":
+  version "9.2.2"
+  resolved "https://registry.yarnpkg.com/@intlify/core-base/-/core-base-9.2.2.tgz#5353369b05cc9fe35cab95fe20afeb8a4481f939"
+  integrity sha512-JjUpQtNfn+joMbrXvpR4hTF8iJQ2sEFzzK3KIESOx+f+uwIjgw20igOyaIdhfsVVBCds8ZM64MoeNSx+PHQMkA==
+  dependencies:
+    "@intlify/devtools-if" "9.2.2"
+    "@intlify/message-compiler" "9.2.2"
+    "@intlify/shared" "9.2.2"
+    "@intlify/vue-devtools" "9.2.2"
+
+"@intlify/devtools-if@9.2.2":
+  version "9.2.2"
+  resolved "https://registry.yarnpkg.com/@intlify/devtools-if/-/devtools-if-9.2.2.tgz#b13d9ac4b4e2fe6d2e7daa556517a8061fe8bd39"
+  integrity sha512-4ttr/FNO29w+kBbU7HZ/U0Lzuh2cRDhP8UlWOtV9ERcjHzuyXVZmjyleESK6eVP60tGC9QtQW9yZE+JeRhDHkg==
+  dependencies:
+    "@intlify/shared" "9.2.2"
+
+"@intlify/message-compiler@9.2.2":
+  version "9.2.2"
+  resolved "https://registry.yarnpkg.com/@intlify/message-compiler/-/message-compiler-9.2.2.tgz#e42ab6939b8ae5b3d21faf6a44045667a18bba1c"
+  integrity sha512-IUrQW7byAKN2fMBe8z6sK6riG1pue95e5jfokn8hA5Q3Bqy4MBJ5lJAofUsawQJYHeoPJ7svMDyBaVJ4d0GTtA==
+  dependencies:
+    "@intlify/shared" "9.2.2"
+    source-map "0.6.1"
+
+"@intlify/shared@9.2.2":
+  version "9.2.2"
+  resolved "https://registry.yarnpkg.com/@intlify/shared/-/shared-9.2.2.tgz#5011be9ca2b4ab86f8660739286e2707f9abb4a5"
+  integrity sha512-wRwTpsslgZS5HNyM7uDQYZtxnbI12aGiBZURX3BTR9RFIKKRWpllTsgzHWvj3HKm3Y2Sh5LPC1r0PDCKEhVn9Q==
+
+"@intlify/vue-devtools@9.2.2":
+  version "9.2.2"
+  resolved "https://registry.yarnpkg.com/@intlify/vue-devtools/-/vue-devtools-9.2.2.tgz#b95701556daf7ebb3a2d45aa3ae9e6415aed8317"
+  integrity sha512-+dUyqyCHWHb/UcvY1MlIpO87munedm3Gn6E9WWYdWrMuYLcoIoOEVDWSS8xSwtlPU+kA+MEQTP6Q1iI/ocusJg==
+  dependencies:
+    "@intlify/core-base" "9.2.2"
+    "@intlify/shared" "9.2.2"
+
 "@vitejs/plugin-vue@^3.0.3":
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-3.2.0.tgz#a1484089dd85d6528f435743f84cdd0d215bbb54"
@@ -64,7 +102,7 @@
     "@vue/compiler-dom" "3.2.45"
     "@vue/shared" "3.2.45"
 
-"@vue/devtools-api@^6.4.5":
+"@vue/devtools-api@^6.2.1", "@vue/devtools-api@^6.4.5":
   version "6.4.5"
   resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.4.5.tgz#d54e844c1adbb1e677c81c665ecef1a2b4bb8380"
   integrity sha512-JD5fcdIuFxU4fQyXUu3w2KpAJHzTVdN+p4iOX2lMWSHMOoQdMAcpFLZzm9Z/2nmsoZ1a96QEhZ26e50xLBsgOQ==
@@ -478,7 +516,7 @@ source-map-js@^1.0.2:
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
 
-source-map@^0.6.1, source-map@~0.6.0:
+source-map@0.6.1, source-map@^0.6.1, source-map@~0.6.0:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
@@ -542,6 +580,16 @@ vite@^3.0.7:
   optionalDependencies:
     fsevents "~2.3.2"
 
+vue-i18n@9:
+  version "9.2.2"
+  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-9.2.2.tgz#aeb49d9424923c77e0d6441e3f21dafcecd0e666"
+  integrity sha512-yswpwtj89rTBhegUAv9Mu37LNznyu3NpyLQmozF3i1hYOhwpG8RjcjIFIIfnu+2MDZJGSZPXaKWvnQA71Yv9TQ==
+  dependencies:
+    "@intlify/core-base" "9.2.2"
+    "@intlify/shared" "9.2.2"
+    "@intlify/vue-devtools" "9.2.2"
+    "@vue/devtools-api" "^6.2.1"
+
 vue-router@4:
   version "4.1.6"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.1.6.tgz#b70303737e12b4814578d21d68d21618469375a1"