首页多语言标签位置，版权位置设置和自适应

最新推荐文章于 2024-10-05 01:22:45 发布

今天你码了吗

最新推荐文章于 2024-10-05 01:22:45 发布

阅读量121

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_50249353/article/details/128466136

版权

vue 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

一、多语言标签位置

1、首先使用绝对定位可以将多语言的标签定位到自己想要的位置，可以自己调整。
2、设置多语言标签的样式我这里采用的是element-ui的组件el-popover，具体代码如下

<div class="aa" >
      <el-popover
  placement="bottom"
  width="150"
  v-model="visible2"
   id="aa"
  >
  <div class="bb">
     <div style="text-align:center; padding:5px" @click="clickm(1)" id="1">简体中文</div>
  <div style="text-align:center;padding:5px" id="2" @click="clickm(0)" >English</div>
  </div>
 
  <i slot="reference" class="iconfont icon-duoyuyan1 cc"  style="font-size:20px"  ></i>
    <!-- <i slot="reference" icon="el-icon-basketball" class=" cc" style="font-size:20px" @click="mm" ></i> -->
</el-popover>
    </div>

visible2 控制pover的显示和隐藏可以在点击的时候调用在这里插入图片描述
这是具体效果样式代码如下

.aa {
  position: absolute;
  top: 1%;
  right: -1%;
  width: 50px;
  height: 50px;
  cursor: pointer;
}
.bb {
  cursor: pointer;
 
}
.bb div:hover {
  background-color: rgb(205, 238, 252);
}

就大功告成了

2、版权位置
也是使用绝对定位，然后不同页面用不同的样式，设置宽，然后使用text-align ：center 根据自己想要的位置来设置下面放代码

@media screen and (min-width: 1264px) {
   .bottom{
  position:absolute;
  font-size: 12px;
  right:0vw;
  width: 33.333%;
  text-align: center;
  height: 28px;
}
}
@media screen and (max-width: 1263px) {
   .bottom{
  
  position:absolute;
  font-size: 12px;
  
  right: 0vw;
  width: 100%;
  height: 28px;
  text-align: center;
   }
}