vlambda博客
学习文章列表

<template><div class="row" id="translateForm"> <div class="col-md-6 col-md-offset-3"> <form action="" id="transForm" class="well form-inline"> <input type="text" class="form-control" placeholder="输入需要翻译的内容"> <select name="" class="form-control bottom"> <option value="en">English</option> <option value="ru">Russian</option> <option value="ko">Korean</option> <option value="ja">Janpenese</option> </select> <input class="btn btn-primary" type="submit" value="在线翻译"> </form> </div></div></template>
<script>export default { data(){ return {
 } }}</script>
<style lang="stylus" scoped>#transForm border-radius: 10px border:1px solid #ccc .bottom margin:10px; @media screen and (max-width:640px) .bottom margin:10px 0 !important; </style>

<template><div id="TranslateOutput"> <h2>结果区</h2></div> </template>
<script>export default{ data(){ return {  } }} </script>
<style lang="stylus" scoped></style>

<template><div id="app"> <h1>在线翻译</h1> <h5 class="text-meted">简单　/　易用　/　便捷</h5>
 <TranslateForm></TranslateForm>
 <TranslateOutput></TranslateOutput> </div></template>
<script>import TranslateForm from './pages/TranslateForm'import TranslateOutput from './pages/TranslateOutput'
export default{ data(){ return {
 } }, components:{ TranslateForm,TranslateOutput }}</script>
<style lang="stylus">#app font-family: 'Avenir', Helvetica, Arial, sans-serif -webkit-font-smoothing: antialiase -moz-osx-font-smoothing: grayscale text-align: center color: #2c3e50 margin-top: 60px width:100%; height: auto; overflow: hidden </style>

import Vue from 'vue'import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
]
const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes})
export default router