night-cherry
/
wiki


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
	<style>

		div span{

			display: inline-block;

			width:auto;

			height:30px;

			line-height: 30px;

			margin: 0 10px;

			padding: 3px;

		}

		div span a{

			color:#862930;

			text-decoration: none;

			
		}

		div span a::before{

			color:#862930;

		}

		div span a::hover{

			color:#121929;

		}

		/* div span a::linked{

			color:orange;

		} */

		div span a::after{

			color:#862930;

		}

		dialog{

			border-radius: 15px;


		}

		dialog::backdrop{

			background-color: #121929;

			backdrop-filter: blur(1px);

		}

		.approve{

			color:#862930;

			background-color:#DED8D4 ;

			font-size: 25px;

			line-height: 30px;

			display: inline-block;

			padding: 2px;

			border-radius: 5px;

			border: 1px solid #862930;

		}

		.approve::hover{

			color:#121929;

			background-color:#862930 ;

			border: 1px solid #121929;

		}

	</style>
</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">
		<!--<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>
		
		<!-- 

		<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"]}}&nbsp;{{item["author"]}}&nbsp;{{item["publisher"]}}&nbsp;{{item["pages"]}}</li>

		</ul> -->
		<hr/>
		<!--<input type="button" text="中文" @click="changelang('zh')"/>

		<input type="button" text="english" @click="changelang('en')"/>-->
		<p>
			<router-link to="/home"  @click="dialog.showModal()">首页</router-link>
			<router-link to="/test" @click="dialog.show()">test</router-link>
			<router-link to="/about" @click="dialog.showModal()">关于</router-link>
		</p>

		<!-- <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>

    </template>
    <!-- <template style="width:100%; backgroud-color:oranged;">

	<Home @op="add">home vue</Home>

        <h2>{{number}}</h2>

    </template> -->
</body>
</html>