search.vue 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
  1. <template>
  2. <div>
  3. <div class="box1">
  4. <div class="box2">
  5. <div class="title">
  6. <span :style="$i18n.locale=='zh'?'margin-left: 152px;':'margin-left:50px;'">
  7. {{ $t('common.Searchin')}}
  8. <!-- <span style="color:#a4cf76;font-size: 20px;"> {{projectTotal}} </span>-->
  9. <!-- {{ $t('common.collaborationopportunities')}}-->
  10. <span style="color:#a4cf76;font-size: 20px;"> {{informationTotal}}+ </span>
  11. {{ $t('common.SearchInInformation')}}
  12. </span>
  13. <span style="float: right;width: 522px; margin-right: 82px;position: relative;text-align: center; ">
  14. <el-input
  15. class="input-with-select"
  16. :placeholder="$t('common.LookingSearch')"
  17. @keyup.enter.native="toView('WholeStationSearch',select,homeInput)"
  18. maxlength="50"
  19. show-word-limit
  20. v-model="homeInput">
  21. <el-select v-model="select" slot="prepend" style="text-align: center;">
  22. <el-option :label="$t('common.WholeStation')" value="all"></el-option>
  23. <el-option :label="$t('common.Project')" value="project"></el-option>
  24. <el-option :label="$t('common.Enterprise')" value="unit"></el-option>
  25. <el-option :label="$t('common.News')" value="information"></el-option>
  26. <el-option :label="$t('common.Events')" value="activity"></el-option>
  27. <el-option :label="$t('common.Conference')" value="meeting"></el-option>
  28. <el-option :label="$t('common.Publications')" value="journal"></el-option>
  29. <el-option :label="$t('common.Country')" value="country"></el-option>
  30. </el-select>
  31. <!-- <el-button slot="append" >搜索</el-button> -->
  32. <!-- <template slot="prepend">{{serch}}</template> -->
  33. </el-input>
  34. <span style="background: #fff;z-index: 99;width: 20px;height: 20px;position: absolute;right: 12px;top: 17px;"
  35. @click="toView('WholeStationSearch',select,homeInput)" >
  36. <i style="position: absolute;right: 1px;top: 1px;font-size: 18px;cursor: pointer;"
  37. class="el-icon-search"></i>
  38. </span>
  39. </span>
  40. </div>
  41. </div>
  42. </div>
  43. </div>
  44. </template>
  45. <script>
  46. import Bus from "@/api/bus"; //注意引入
  47. export default {
  48. name: 'Search',
  49. data () {
  50. return {
  51. title:'项目资源',
  52. serch:'项目',
  53. select:'all',
  54. homeInput:'',
  55. placeHolder:'',
  56. label:''
  57. }
  58. },
  59. created() {
  60. // this.lookingChange();
  61. Bus.$on("title", (val) => {
  62. this.title=val.label
  63. });
  64. Bus.$on("serch", (val) => {
  65. this.serch=val.label
  66. });
  67. // let that = this;
  68. // document.onkeypress = (e) =>{
  69. // var keycode = document.all ? event.keyCode : e.which;
  70. // if (keycode == 13) {
  71. // that.toView('WholeStationSearch',that.select,that.homeInput)
  72. // return false;
  73. // }
  74. // };
  75. },
  76. props: {
  77. informationTotal:{
  78. type: String,
  79. default: ''
  80. }
  81. },
  82. methods:{
  83. // lookingChange(){
  84. // this.placeHolder=$t('common.LookingSearch');
  85. // }
  86. toView(router, select,input) {
  87. if(!input){
  88. this.$message({
  89. message: this.$t('common.Theinputboxcannotbeempty'),
  90. type: 'warning'
  91. });
  92. }else {
  93. this.$store.commit('modify', router);
  94. window.localStorage.setItem('router', router);
  95. const { href } = this.$router.resolve({
  96. name: router,
  97. query: {
  98. select: select,
  99. input:input
  100. }
  101. });
  102. window.open(href, '_blank');
  103. }
  104. },
  105. }
  106. }
  107. </script>
  108. <!-- Add "scoped" attribute to limit CSS to this component only -->
  109. <style scoped>
  110. body {
  111. margin: 0;
  112. padding: 0;
  113. }
  114. .box1 {
  115. /* width:1500px; */
  116. height: 60px;
  117. margin: auto;
  118. }
  119. .box2 {
  120. width: 1200px;
  121. height: 60px;
  122. margin: auto;
  123. position: relative;
  124. }
  125. .language {
  126. line-height: 50px;
  127. color: #ccc;
  128. font-weight: 400;
  129. font-size: 12px;
  130. }
  131. .logo {
  132. position: absolute;
  133. top: 50px;
  134. left: 80px;
  135. width: 260px;
  136. height: 55px;
  137. }
  138. .box1 .title {
  139. position: absolute;
  140. top: 10px;
  141. left: 0px;
  142. font-size: 15px;
  143. font-weight: 700;
  144. height: 50px;
  145. line-height: 50px;
  146. color: #666;
  147. width: 1200px;
  148. }
  149. .box1 .title >>>.el-input__inner {
  150. height: 50px !important;
  151. border-radius: 0 22px 22px 0;
  152. }
  153. .box1>>>.el-input--suffix .el-input__inner{
  154. text-align: center;
  155. }
  156. .box1 .title >>>.el-input-group__prepend {
  157. width: 100px;
  158. border-radius: 22px 0 0 22px;
  159. background: #fff;
  160. }
  161. .box1 .header1 >>>.el-input-group__prepend {
  162. background-color: #fff;
  163. color: #000;
  164. }
  165. .box1 .title >>>.el-input-group {
  166. border-radius: 20px;
  167. }
  168. </style>