时区 时间

src/views/About.vue

@@ -2,7 +2,7 @@
 <template>
   <div class="about">
 
-    <div class="mt10">时区时间转化：</div>
+    <div class="">时区时间转化：</div>
     <el-input placeholder="请输入内容"
               v-model="time"
               class="input-with-select mt10">
@@ -18,7 +18,7 @@
                  icon="el-icon-search"
                  @click="showList">转化</el-button>
     </el-input>
-    <div class="mt10">时间戳为：{{ currTime }}   {{ nowStr }}</div>
+    <div class="mt10">时间戳为：{{ currTime }} {{ nowStr }}</div>
     <div class="mt10">所有时区时间戳为：</div>
     <div>
       <span v-for="(item,index) of unixList"
@@ -26,6 +26,31 @@
             class="time-item">{{ item.label }}：{{ item.unix }}</span>
     </div>
 
+    <el-divider></el-divider>
+    <div class="mt10">时间戳转化：</div>
+    <el-input placeholder="请输入内容"
+              v-model="time2"
+              class="input-with-select mt10">
+      <el-select v-model="select2"
+                 slot="prepend"
+                 placeholder="请选择">
+        <el-option :label="item.label"
+                   :value="item.diff"
+                   v-for="item of utcList"
+                   :key="item.lable"></el-option>
+      </el-select>
+      <el-button slot="append"
+                 icon="el-icon-search"
+                 @click="showList2">转化</el-button>
+    </el-input>
+    <div class="mt10">时间为：{{ currTime2 }}</div>
+    <div class="mt10">所有时区时间为：</div>
+    <div>
+      <span v-for="(item,index) of timeStrList"
+            :key="index"
+            class="time-item">{{ item.label }}：{{ item.unix }}</span>
+    </div>
+
     <el-divider></el-divider>
     <div class="mt10">时间格式化：</div>
     <div v-for="item of list"
@@ -46,6 +71,7 @@
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 //例如：import 《组件名称》 from '《组件路径》';
 import dayjs from "dayjs";
+
 export default {
   name: "About",
   props: {},
@@ -61,7 +87,12 @@ export default {
       time: dayjs().format("YYYY-MM-DD HH:mm:ss"),
       unixList: [],
       currTime: "",
-      nowStr:"",
+      nowStr: "",
+
+      select2: 0,
+      time2: "",
+      timeStrList:[],
+      currTime2:"",
     }
   },
   //监听属性 类似于data概念
@@ -80,9 +111,32 @@ export default {
   async mounted () {
     this.initList();
     this.test();
+
+    this.test2()
   },
   //方法集合
   methods: {
+    test2 () {
+      this.time2 = dayjs().unix();
+
+      this.showList2();
+    },
+    showList2 () {
+      let list = []
+      for (let item of this.utcList) {
+        let diff = this.select2 - item.diff;
+        let newTime = this.time2 - (diff * 60 * 60);
+        let timeStr = dayjs(newTime * 1000).format("YYYY-MM-DD HH:mm:ss");
+        list.push({
+          label: item.label,
+          unix: timeStr,
+        })
+        if(diff == 0){
+            this.currTime2 = timeStr;
+        }
+      }
+      this.timeStrList = list;
+    },
     test () {
       for (let i = -11; i <= 12; i++) {
         let label = i;