【SDU项目实训2019级】前端设计——推荐界面，存储用户职业、专业、感兴趣的词

完成注册之后，会让用户选择自己与中医相关的职业、专业、以及感兴趣的热词/领域词，以便后续来实现用户推荐排序功能：

根据用户选择，保存用户选择的兴趣词，向后端传送该数据，后端保存在数据库。

以下是自己设计的单选框/复选框按钮，是不是很好看！我也觉得！主要是样式的设计

主体部分为右边可以选择的部分：

                <div class="widget widget_categories">
                  <div class="widget-head">
                    <h3>你的职业</h3>
                  </div>
                  <div class="tagcloud">
                      <label v-for="(item,index) in whom":class="{active:index == isA }" @click="ClickActiveOne1(index)">
                        {{item.job}}</label>
                  </div>
                </div>
                <div class="widget widget_categories">
                  <div class="widget-head">
                    <h3>你的专业</h3>
                  </div>
                  <div class="tagcloud">
                    <label v-for="(item,index) in profession" :class="{active:index == isPro}" @click="ClickActiveOne2(index)">
                      {{item.pname}}</label>
                  </div>
                </div>
                <div class="widget widget_tag_cloud">
                  <div class="widget-head">
                    <h3>感兴趣的词条</h3>
                  </div>
                  <div class="tagcloud">
                    <label v-for="(item,index) in word" :class="{active:item.active}" @click="ClickActive(item,index)">
                      {{item.wname}}</label>
                  </div>
                </div>

其中“你的职业”“你的专业”“感兴趣的词条”的样式css：

.blog-sidebar {
  padding-left: 30px;
}

.blog-sidebar .widget {
  margin-bottom: 40px;
}

.blog-sidebar .widget .widget-head {
  padding-bottom: 8px;
  border-bottom: 1px solid #D4D4D4;
  margin-bottom: 20px;
}

.blog-sidebar .widget .widget-head h3 {
  display: inline-block;
  font-size: 18px;
  color: #fff;
  font-weight: 600;
  text-transform: capitalize;
  padding: 10px 15px;
  border-radius: 3px;
  background-color: #00715D;
}

然后所有词条的标签的样式css：

.blog-sidebar .tagcloud {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 15px 10px;
}

.blog-sidebar .tagcloud label {
  display: inline-block;
  padding: 5px 20px;
  background-color: #D9EAE7;
  border-radius: 3px;
  font-size: 14px;
  color: #232323;
  text-transform: capitalize;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

然后用户点击切换词条，是通过添加click监听方法，然后给标签添加属性，点击一下将属性变为true或者获取标签的索引，使高亮（即图片中的红色样式）展示出来

多选则是给我的列表的元素添加一个active属性：true/false，通过点击来实现选择/不选择，然后v-for绑定展示高亮（选择）/普通（不选择） 

 在style里面添加：

label.active{
  background-color: #E26262;
  color: #fff;
}

即自己设计的好看的单选框/多选框实现啦~，没有使用element-ui提供的单选多选框。

然后通过点击去搜索，即会向后端发送一个request，将该信息存储在user表中，保存用户实体，添加属性。

然后用户个性推荐选择部分完成，主要是为了后面实现推荐排序功能，提供用户画像~