<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>index</title>
<link rel="stylesheet" type="text/css" href="./style/index.css">
</head>
<body>
<!-- <h3>this is node -> Vue test</h3> -->
<div id='app' style='color:red; font-size:20px; font-weight:bold;'>app node start...</div>
<template id="my-app">
<header></header>
<!--<div v-html='info'></div>
<Home @op="add">home vue</Home>
<h5 style="color:oranged">{{number}}</h5>
<About>this is About</About>
<test></test>-->
<h3>{{$t('messages.app')}}</h3>
<h3>{{$t('messages.philosophy')}}</h3>
<div>
<span><a :href="$t('messages.pages.index_link')">{{$t('messages.pages.index')}}</a></span>
<span><a :href="$t('messages.pages.sample_link')">{{$t('messages.pages.sample')}}</a></span>
<span><a :href="$t('messages.pages.catagory_link')">{{$t('messages.pages.catagory')}}</a></span>
<span><a :href="$t('messages.pages.contact_link')">{{$t('messages.pages.contact')}}</a></span>
<span><a :href="$t('messages.pages.about_link')">{{$t('messages.pages.about')}}</a></span>
</div>
<div class="flex flex-wrap gap-4 item-center">
<el-select
v-model="value"
placeholder="Select"
size="large"
style="width: 240px"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
@click="changelang(item.value)"
/>
</el-select>
</div>
<br/>
<!--避免使用单标签，组件按照双标签规范用； js代码相对位置导入后可以直接使用 -->
<!-- <p>before i18n label</p> -->
<div class="approve" onclick="dialog.showModal()">{{$t('messages.component.approve.login')}}</div>
<div class="approve" v-t="'messages.component.approve.register'" onclick="dialog.showModal()"></div>
<div class="approve" onclick="dialog.showModal()">
<!-- <router-link to="/login">{{$t('messages.component.approve.login')}}</router-link> -->
<router-link to="/login">{{$t('messages.component.approve.login')}}</router-link>
</div>
<div class="approve" onclick="dialog.showModal()">
<router-link to="/register">{{$t('messages.component.approve.register')}}</router-link>
<!-- <span class="approve" onclick="dialog.showModal()">
<router-link to="/register">{{$t('messages.component.approve.register')}}</router-link>
</span> -->
</div>
<div class="approve" onclick="dialog.showModal()">
<!-- <router-link to="/login">{{$t('messages.component.approve.login')}}</router-link> -->
<router-link to="/file">{{$t('messages.component.file.file')}}</router-link>
</div>
<!--
<p>after i18n label</p>
<label @click="changelang('zh')">中文</label>
<label @click="changelang('en')">english</label>
-->
<div class="craft">
<h3>{{$t('messages.pages.craft.title')}} : </h3>
<span><a :href="$t('messages.pages.craft_link.software_customization_link')">{{$t('messages.pages.craft.software_customization')}}</a></span>
<span><a :href="$t('messages.pages.craft_link.uv_product_customization_link')">{{$t('messages.pages.craft.uv_product_customization')}}</a></span>
<span><a :href="$t('messages.pages.craft_link.lazer_marking_and_cutting_link')">{{$t('messages.pages.craft.lazer_marking_and_cutting')}}</a></span>
<span><a :href="$t('messages.pages.craft_link.customized_smart_hardware_products_link')">{{$t('messages.pages.craft.customized_smart_hardware_products')}}</a></span>
<span><a :href="$t('messages.pages.craft_link.product_purchasing_link')">{{$t('messages.pages.craft.product_purchasing')}}</a></span>
<span><a :href="$t('messages.pages.craft_link.skill_training_link')">{{$t('messages.pages.craft.skill_training')}}</a></span>
<span><a :href="$t('messages.pages.craft_link.equipment_process_construction_link')">{{$t('messages.pages.craft.equipment_process_construction')}}</a></span>
<span><a :href="$t('messages.pages.craft_link.artistic_design_link')">{{$t('messages.pages.craft.artistic_design')}}</a></span>
<span><a :href="$t('messages.pages.craft_link.game_picture_book_design_link')">{{$t('messages.pages.craft.game_picture_book_design')}}</a></span>
<span><a :href="$t('messages.pages.craft_link.brand_marketing_product_customization_link')">{{$t('messages.pages.craft.brand_marketing_product_customization')}}</a></span>
</div>
<hr/>
<h3>connect to tomcat</h3>
<button @click="interface_web()">connect to tomcat</button>
<br/>
<h4>tomcat_res -> {{ tomcat_res==""?"content empty":tomcat_res }}</h4>
<hr/>
<h2>书籍列表</h2>
<table>
<th>index</th><th>title</th><th>author</th><th>publisher</th><th>pages</th><th>operation</th>
<tr v-for="(value,key,index) in books">
<td>{{key}}</td>
<td>{{value.title}}</td>
<td>{{value.author}}</td>
<td>{{value.publisher}}</td>
<td>{{value.pages}}</td>
</tr>
</table>
<!-- <ul v-for="(value,key,index) in books">
<li v-for="(iterm,key,value) in books">{{value}}-{{key}}-{{item}}</li>
<li>{{item}}</li>
<li>{{value.title}}</li><li>{{value.author}}</li><li>{{value.publisher}}</li><li>{{value.pages}}</li>
<li>{{item["title"]}} {{item["author"]}} {{item["publisher"]}} {{item["pages"]}}</li>
</ul> -->
<hr/>
<!--<input type="button" text="中文" @click="changelang('zh')"/>
<input type="button" text="english" @click="changelang('en')"/>-->
<div class="router-link">
<span class="approve" onclick="dialog.showModal()">
<router-link to="/home" >{{$t('messages.pages.index')}}</router-link>
</span>
<span class="approve" onclick="dialog.showModal()">
<router-link to="/test">{{$t('messages.pages.sample')}}</router-link>
</span>
<span class="approve" onclick="dialog.showModal()">
<router-link to="/about">{{$t('messages.pages.about')}}</router-link>
</span>
</div>
<!-- <router-view></router-view> -->
<!-- <button onclick="dialog.show()">弹窗show（）</button>
<button onclick="dialog.showModal()">弹窗showModal（）</button> -->
<dialog id="dialog">
<!-- <h2>这是弹窗内容</h2> -->
<router-view></router-view>
<button onclick="dialog.close()">关闭</button>
</dialog>
<img src="./media/image/book.png" width="200px" height="auto"/>
<img src="./media/image/Chanel.png" width="200px" height="auto"/>
<img src="./media/image/cake.jpg" width="200px" height="auto"/>
<video src="./media/audio/test.mp4" width="500px" height="auto" style="display: inline-block;" controls=""></video>
<video controls muted="true" width="500px" height="auto" style="display: inline-block;" controls="">
<source src="./media/audio/av-out2.mp4" type="video/mp4">
您的浏览器暂不支持video浏览
</video>
</template>
<!-- <template style="width:100%; backgroud-color:oranged;">
<Home @op="add">home vue</Home>
<h2>{{number}}</h2>
</template> -->
</body>
</html>