123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284 |
- <template>
- <div class="mine">
- <div class="left">
- <div class="user-info">
- <div class="user-img">
- <img :src="userInfo.avatar_url" alt />
- </div>
- <div class="user-span">
- <div class="name">
- 昵称:
- <span>{{userInfo.nickname}}</span>
- </div>
- <div class="sex">
- 性别:
- <span>{{userInfo.sex==1?'男':userInfo.sex==2?'女':'未知'}}</span>
- </div>
- <div class="age">
- 肤龄:
- <span>{{userInfo.age}}</span>
- </div>
- <div class="skin-type">
- 肤质:
- <span>{{userInfo.skin}}</span>
- </div>
- </div>
- </div>
- <div class="user-record">
- <div class="fraction">
- <div class="title">肌肤得分</div>
- <div class="num">{{userInfo.score}}分</div>
- </div>
- <div class="status">
- <div class="title">皮肤状态</div>
- <div class="tips">{{userInfo.skin_status}}</div>
- </div>
- <div class="times">
- <div class="title">上传检测时间</div>
- <div class="ts">{{userInfo.check_time}}</div>
- </div>
- </div>
- <div class="summary">
- <div class="left-title">皮肤总结</div>
- <div class="summary-list">
- <div class="summary-info" v-for="item,index in detail_list" :key="index">
- <div class="result">
- <div class="result-left">
- <div class="title">{{item.name}}:</div>
- <div class="tips">{{item.main_item.name}}{{item.main_item.num}}</div>
- </div>
- <div class="right min-size">
- <div v-for="value,i in item.items" :key="i">{{value.name}}:{{value.num}}个</div>
- </div>
- </div>
- <div class="bottom-tips">
- <span>{{item.suggest}}</span>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="right">
- <div class="lable" :style="isOpen?'height: 275px;':'height: 76px;'">
- <div class="lable-title">
- <div>面诊标签</div>
- <div class="edit">编辑</div>
- </div>
- <div class="problem">
- <div class="problem-title">问题标签</div>
- <div class="problem-lable">
- <div
- class="lable-text"
- v-for="item,index in problem"
- :key="index"
- :style="{background:item.bgcolor,borderColor:item.bdcolor}"
- >{{item.text}}</div>
- </div>
- </div>
- <div class="problem">
- <div class="problem-title">面部标签</div>
- <div class="problem-lable">
- <div
- class="lable-text"
- v-for="item,index in lableList"
- :key="index"
- :style="{background:item.bgcolor,borderColor:item.bdcolor}"
- >{{item.text}}</div>
- </div>
- </div>
- <div class="lable-title">备注</div>
- <div class="remarks-text">{{remarks}}</div>
- <div class="open-icon">
- <img
- @click="isOpen = !isOpen"
- :src="isOpen?'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/coupon/unOpen.png':'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/coupon/open.png'"
- alt
- />
- </div>
- </div>
- <div class="programme" :style="isOpen?'height: 165px;':'height: 364px;'">
- <div class="tab">
- <div class="tab-title">执行方案</div>
- <div class="add" @click="isSkin=true">新增</div>
- </div>
- <div class="programmeList">
- <div class="programmeWeek">
- <div class="programmeItem" v-for="item,index in 4" :key="index">
- <div
- :class="selectWeek==index?'weekItemSelect':'weekItem'"
- @click="weekSelect(index)"
- >第几周</div>
- <div class="weekLine" v-if="index==3?false:true"></div>
- </div>
- </div>
- <div class="weekDetails">
- <div class="contentItem" v-for="item,index1 in 4" :key="index1">
- <div class="itemTitle">第几次 干了啥 间隔多少天</div>
- <div class="itemContent" v-for="items,index2 in 4" :key="index2">
- <img class="itemContent-img" />
- <div class="itemContent-right">
- <div class="right-content">
- <div class="right-name">【深层清洁】美国super extra…</div>
- <div class="right-price">79.00</div>
- </div>
- <div class="right-project">+润百颜</div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="submit" @click="onSubmit">保存</div>
- </div>
- <mine-pupop :show="isSkin">
- <div class="block">
- <div class="delete-pupop" @click="isSkin=false">
- <img
- src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/delete.png"
- alt
- />
- </div>
- <div class="pupop-title">皮肤问题标签</div>
- <div class="skinDiv">
- <div
- :class="item.select?'skin-item':'skin-item-not'"
- v-for="item,index in skinTag"
- :key="index"
- @click="selectSkingTag(index)"
- >{{item.name}}</div>
- </div>
- <div class="submit-frequency" @click="submitFrequency(1)">下一步</div>
- </div>
- </mine-pupop>
- <mine-pupop :show="faceTag">
- <div class="block">
- <div class="delete-pupop" @click="faceTag=false">
- <img
- src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/delete.png"
- alt
- />
- </div>
- <div class="pupop-title">面部问题标签</div>
- <div class="faceTag">
- <div class="faceTagContent" v-for="item,index in faceTagData" :key="index">
- <div class="faceTagTitle">{{item.name}}</div>
- <div class="faceTagHor">
- <div
- :class="tag.select?'faceTagItem':'faceTagItem-not'"
- v-for="tag,index1 in item.dataS"
- :key="index1"
- @click="selectfaceTag(index,index1)"
- >{{tag.name}}</div>
- </div>
- </div>
- </div>
- <div class="submit-frequency" @click="submitFrequency(2)">下一步</div>
- </div>
- </mine-pupop>
- <mine-pupop :show="notice">
- <div class="block">
- <div class="delete-pupop" @click="notice=false">
- <img
- src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/delete.png"
- alt
- />
- </div>
- <div class="pupop-title">备注</div>
- <textarea type="text" class="noticeInput" placeholder="备注" v-model="noticeInput"></textarea>
- <div class="noticeSubmit">
- <div class="submit-back" @click="backSubmit(3)">返回</div>
- <div class="submit-notice" @click="submitFrequency(4)">确定</div>
- <div class="submit-notice" @click="submitFrequency(3)">跳过</div>
- </div>
- </div>
- </mine-pupop>
- <!-- 新增执行方案 -->
- <mine-pupop :show="isPupop">
- <div class="block">
- <div class="delete-pupop" @click="isPupop=false">
- <img
- src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/delete.png"
- alt
- />
- </div>
- <div class="pupop-title">选择执行方案</div>
- <el-select v-model="projectInfo" placeholder="请选择项目" class="project-select" size="mini">
- <el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id"></el-option>
- </el-select>
- <div class="frequency">
- <div>执行频率:</div>
- <el-select v-model="weekInfo" class="week-select" size="mini">
- <el-option
- v-for="item in weekList"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- ></el-option>
- </el-select>
- <div>周</div>
- <el-select v-model="timesInfo" class="times-select" size="mini">
- <el-option
- v-for="item in timesList"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- ></el-option>
- </el-select>
- <div>次</div>
- </div>
- <div class="submit-frequency" @click="submitFrequency(4)">确定</div>
- </div>
- </mine-pupop>
- </div>
- </template>
- <script>
- import minePupop from "../../../components/minePupop/index.vue";
- import api from "../../../server/home";
- export default {
- components: { minePupop },
- data() {
- return {
- userInfo: {},
- //皮肤总结
- detail_list: [],
- problem: [
- { text: "干性(干燥)" },
- { text: "干性(干燥、脱皮、缺水)" },
- { text: "干性(干燥、脱皮、缺水)" },
- { text: "干性(干燥、脱皮、缺水)" },
- { text: "干性(干燥、脱皮、缺水)" },
- { text: "干性(干燥、脱皮、缺水)" }
- ],
- //面部标签
- lableList: [
- { text: "干性(干燥)" },
- { text: "干性(干燥、脱皮、缺水)" },
- { text: "干性(干燥、脱皮、缺水)" },
- { text: "干性(干燥、脱皮、缺水)" },
- { text: "干性(干燥、脱皮、缺水)" },
- { text: "干性(干燥、脱皮、缺水)" }
- ],
- //后台默认的标签
- tags: [],
- noticeInput: "",
- notice: false,
- //执行方案
- programmeList: [
- {
- frequency: "1周1次",
- duration: "28天"
- },
- {
- frequency: "1周1次",
- duration: "28天"
- },
- {
- frequency: "1周1次",
- duration: "28天"
- }
- ],
- faceTag: false,
- faceTagData: [],
- selectWeek: 0,
- skinTag: [],
- //项目列表
- projectList: [
- {
- value: "选项1",
- label: "黄金糕"
- },
- {
- value: "选项2",
- label: "双皮奶"
- },
- {
- value: "选项3",
- label: "蚵仔煎"
- },
- {
- value: "选项4",
- label: "龙须面"
- },
- {
- value: "选项5",
- label: "北京烤鸭"
- }
- ],
- //周期
- weekList: [
- {
- value: "选项1",
- label: "1"
- },
- {
- value: "选项2",
- label: "2"
- }
- ],
- //次数
- timesList: [
- {
- value: "选项1",
- label: "1"
- },
- {
- value: "选项2",
- label: "2"
- }
- ],
- timesInfo: "", //次数
- projectInfo: "", //项目
- projectId: "", //项目id
- weekInfo: "", //周次
- programmeIndex: "",
- remarks: "打架和考到几点拉进来的", //备注
- isPupop: false, //新增执行方案
- isSkin: false, //新增皮肤问题标签
- id: 0,
- isOpen: false //是否展开
- };
- },
- computed: {},
- watch: {},
- methods: {
- getSkinInfo() {
- api.getSkinInfo({ id: this.id }).then(res => {
- this.userInfo = res.data.user;
- this.detail_list = res.data.detail_list;
- this.programmeList = res.data.scheme_list;
- // this.remarks = res.data.remark
- });
- },
- // 获取问题标签
- skinFace_tags() {
- api.skinFace_tags().then(res => {
- let doSkin = [];
- for (let i = 0; i < res.data.list.length; i++) {
- let skinItem = res.data.list[i];
- skinItem.dataS = [];
- for (let j = 0; j < skinItem.question_name.length; j++) {
- let doNow = {
- name: skinItem.question_name[j],
- select: false
- };
- skinItem.dataS.push(doNow);
- }
- doSkin.push(skinItem);
- }
- console.log(doSkin);
- this.faceTagData = doSkin;
- });
- },
- // 获取皮肤问题标签
- skinSkin_tags() {
- api.skinSkin_tags().then(res => {
- let doSkin = [];
- for (let i = 0; i < res.data.list.length; i++) {
- let skinItem = res.data.list[i];
- skinItem.select = false;
- doSkin.push(skinItem);
- }
- this.skinTag = doSkin;
- });
- },
- getSkinTags() {
- api.getSkinTags().then(res => {
- this.tags = res.data.tags;
- });
- },
- selectSkingTag(index) {
- this.skinTag[index].select = !this.skinTag[index].select;
- },
- selectfaceTag(index, index1) {
- this.faceTagData[index].dataS[index1].select = !this.faceTagData[index]
- .dataS[index1].select;
- },
- getProject() {
- api.getProject().then(res => {
- this.projectList = res.data.list;
- });
- },
- getSkinUpdate() {
- let params = {
- remark: this.remarks,
- tags: this.lableList.toString()
- };
- api.getSkinUpdate().then(res => {});
- },
- onOperation(index) {
- if (this.programmeList[index].onSelect) {
- this.$set(
- this.programmeList[index],
- "onSelect",
- !this.programmeList[index].onSelect
- );
- } else {
- this.$set(this.programmeList[index], "onSelect", true);
- }
- },
- weekSelect(index) {
- console.log("xxxx");
- this.selectWeek = index;
- },
- onSubmit() {
- this.getSkinUpdate();
- },
- submitFrequency(e) {
- console.log(this.noticeInput);
- if (e == 1) {
- this.isSkin = false;
- this.faceTag = true;
- }
- if (e == 2) {
- this.faceTag = false;
- this.notice = true;
- }
- if (e == 4) {
- this.schemeSave();
- }
- },
- // 面部标签值,如:额头:颜色,横纹;眼部:下垂;
- schemeSave() {
- let skinTags = "";
- let FaceTags = "";
- for (let i = 0; i < this.skinTag.length; i++) {
- if (this.skinTag[i].select) {
- skinTags = this.skinTag[i].id;
- }
- }
- for (let i = 0; i < this.faceTagData.length; i++) {
- for (let j = 0; j < this.faceTagData[i].dataS.length; j++) {
- if (this.faceTagData[i].dataS[j].select) {
- FaceTags =
- FaceTags +
- "," +
- this.faceTagData[i].name +
- ":" +
- this.faceTagData[i].dataS[j].name;
- }
- }
- }
- api
- .schemeSave({
- user_id: this.id,
- skin_id: skinTags,
- face_names: FaceTags.substring(1,FaceTags.length),
- remark: this.noticeInput
- })
- .then(res => {
- this.$router.push({
- path: "/testSkin/updates",
- query: {
- id: 1
- }
- });
- });
- },
- randomColor(type) {
- let arr = [
- {
- background: "rgba(244, 247, 255, 1)",
- border: "rgba(85, 124, 255, 1)"
- },
- {
- background: "rgba(245, 252, 245, 1)",
- border: "rgba(66, 211, 81, 1)"
- },
- {
- background: "rgba(254, 244, 237, 1)",
- border: "rgba(250, 125, 34, 1)"
- },
- {
- background: "rgba(249, 245, 255, 1)",
- border: "rgba(136, 50, 255, 1)"
- },
- {
- background: "rgba(255, 252, 245, 1)",
- border: "rgba(204, 116, 42, 1)"
- }
- ];
- this.problem.forEach(res => {
- let color = Math.floor(Math.random() * arr.length);
- this.$set(res, "bgcolor", arr[color].background);
- this.$set(res, "bdcolor", arr[color].border);
- });
- this.lableList.forEach(res => {
- let color = Math.floor(Math.random() * arr.length);
- this.$set(res, "bgcolor", arr[color].background);
- this.$set(res, "bdcolor", arr[color].border);
- });
- }
- },
- created() {
- let id = this.$route.query.id;
- this.id = id;
- this.skinFace_tags();
- this.skinSkin_tags();
- this.getSkinInfo();
- this.getProject();
- this.getSkinTags();
- },
- mounted() {
- this.randomColor();
- }
- };
- </script>
- <style lang='less' scoped>
- .mine {
- height: 100%;
- display: flex;
- .left {
- width: 318px;
- padding: 12px 12px 0 12px;
- background: #ffffff;
- box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
- border-radius: 8px;
- font-size: 13px;
- font-family: PingFangSC-Regular, PingFang SC;
- font-weight: 400;
- color: #999999;
- line-height: 18px;
- height: 100%;
- .user-info {
- display: flex;
- align-items: center;
- .user-img {
- width: 96px;
- img {
- width: 100%;
- border-radius: 5px;
- display: block;
- }
- }
- .user-span {
- margin-left: 12px;
- span {
- color: #333333;
- }
- }
- }
- .user-record {
- margin-top: 16px;
- display: flex;
- justify-content: space-between;
- .num {
- font-size: 18px;
- font-family: OPPOSans-B, OPPOSans;
- font-weight: normal;
- color: #333333;
- line-height: 29px;
- }
- .tips {
- font-size: 13px;
- font-family: PingFangSC-Regular, PingFang SC;
- font-weight: 400;
- color: #333333;
- line-height: 30px;
- }
- .ts {
- font-size: 13px;
- font-family: PingFangSC-Regular, PingFang SC;
- font-weight: 400;
- color: #333333;
- line-height: 30px;
- }
- }
- .summary {
- .left-title {
- margin-top: 10px;
- font-size: 14px;
- font-family: PingFangSC-Medium, PingFang SC;
- font-weight: 500;
- color: #333333;
- line-height: 20px;
- }
- .summary-list {
- margin-top: 10px;
- height: 280px;
- overflow: scroll;
- .summary-info {
- border-radius: 4px;
- margin-bottom: 20px;
- border: 1px solid #f5f5f5;
- .result {
- padding: 10px;
- display: flex;
- justify-content: space-between;
- align-content: center;
- .result-left {
- font-family: PingFangSC-Regular, PingFang SC;
- font-weight: 400;
- .title {
- font-size: 14px;
- color: #666666;
- line-height: 20px;
- }
- .tips {
- font-size: 18px;
- color: #fa7d22;
- line-height: 25px;
- }
- }
- .right {
- font-size: 12px;
- font-family: PingFangSC-Regular, PingFang SC;
- font-weight: 400;
- color: #666666;
- line-height: 20px;
- text-align: end;
- }
- }
- .bottom-tips {
- padding: 6px 10px;
- font-size: 10px;
- font-family: PingFang-SC-Regular, PingFang-SC;
- font-weight: 400;
- color: #333333;
- line-height: 14px;
- background: #f5f5f5;
- border-radius: 4px;
- span {
- display: block;
- zoom: 0.83;
- }
- }
- }
- }
- }
- }
- .right {
- margin-left: 18px;
- position: relative;
- flex: 1;
- .lable {
- width: 100%;
- padding: 12px;
- background: #ffffff;
- box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
- border-radius: 8px;
- overflow: hidden;
- position: relative;
- .lable-title {
- font-size: 14px;
- font-family: PingFangSC-Medium, PingFang SC;
- font-weight: 500;
- color: #333333;
- line-height: 20px;
- margin-bottom: 8px;
- display: flex;
- justify-content: space-between;
- .edit {
- width: 60px;
- height: 28px;
- background: #fa7d22;
- border-radius: 8px;
- font-size: 14px;
- font-family: PingFangSC-Medium, PingFang SC;
- font-weight: 500;
- color: #ffffff;
- line-height: 28px;
- text-align: center;
- }
- }
- .remarks-text {
- font-size: 12px;
- font-family: PingFangSC-Regular, PingFang SC;
- font-weight: 400;
- color: #666666;
- line-height: 17px;
- }
- .problem {
- display: flex;
- .problem-title {
- font-size: 13px;
- font-family: PingFangSC-Regular, PingFang SC;
- font-weight: 400;
- color: #333333;
- line-height: 18px;
- }
- .problem-lable {
- flex: 1;
- overflow-y: hidden;
- width: 100%;
- height: 68px;
- font-size: 12px;
- font-family: PingFang-SC-Regular, PingFang-SC;
- font-weight: 400;
- color: #333333;
- line-height: 17px;
- display: flex;
- flex-flow: column wrap;
- list-style-type: none;
- overflow-x: scroll;
- align-items: baseline;
- .lable-text {
- margin-left: 10px;
- margin-bottom: 10px;
- height: 24px;
- line-height: 24px;
- border: 1px solid #42d351;
- padding: 0 12px;
- border-radius: 2px;
- }
- }
- }
- .open-icon {
- width: 100%;
- padding-top: 10px;
- position: absolute;
- height: 38px;
- background: #ffffff;
- bottom: 0;
- text-align: center;
- img {
- width: 24px;
- }
- }
- }
- .programme {
- margin-top: 18px;
- width: 100%;
- background: #ffffff;
- box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
- border-radius: 8px;
- padding: 14px 12px 0 12px;
- overflow: hidden;
- .tab {
- display: flex;
- align-items: center;
- justify-content: space-between;
- .tab-title {
- font-size: 14px;
- font-family: PingFangSC-Medium, PingFang SC;
- font-weight: 500;
- color: #333333;
- line-height: 20px;
- }
- .add {
- width: 60px;
- height: 28px;
- line-height: 28px;
- background: #fa7d22;
- border-radius: 8px;
- font-size: 14px;
- font-family: PingFangSC-Medium, PingFang SC;
- font-weight: 500;
- color: #ffffff;
- text-align: center;
- }
- }
- .programmeList {
- width: 510px;
- height: 270px;
- }
- .programmeWeek {
- width: 510px;
- display: flex;
- align-items: center;
- }
- .programmeItem {
- margin-top: 20px;
- flex: 1;
- display: flex;
- }
- .weekItem {
- text-align: center;
- font-size: 13px;
- font-family: PingFangSC-Regular, PingFang SC;
- font-weight: 400;
- color: #999999;
- flex: 1;
- }
- .weekItemSelect {
- text-align: center;
- font-size: 13px;
- font-family: PingFangSC-Regular, PingFang SC;
- font-weight: 400;
- color: #fa7d22;
- flex: 1;
- }
- .weekLine {
- width: 1px;
- height: 12px;
- background: #f0f0f0;
- }
- .weekDetails {
- margin-top: 20px;
- width: 509px;
- height: 232px;
- border-radius: 6px;
- border: 1px solid #f5f5f5;
- display: flex;
- align-items: center;
- overflow: scroll;
- }
- .contentItem {
- margin-left: 10px;
- width: 317px;
- min-height: 211px;
- border-right: 1px solid #f5f5f5;
- // overflow-y: scroll;
- }
- .line-hor {
- margin-top: 30px;
- margin-left: 10px;
- width: 1px;
- height: 261px;
- background: #f0f0f0;
- }
- .itemTitle {
- margin-top: 40px;
- width: 100%;
- line-height: 20px;
- font-size: 12px;
- font-weight: 400;
- color: #333333;
- }
- .itemContent {
- width: 317px;
- margin-top: 10px;
- display: flex;
- align-items: center;
- height: 49px;
- }
- .itemContent-img {
- width: 49px;
- height: 49px;
- background: #d8d8d8;
- border-radius: 2px;
- }
- .itemContent-right {
- margin-left: 10px;
- display: flex;
- flex-direction: column;
- height: 49px;
- flex: 1;
- }
- .right-content {
- flex: 1;
- display: flex;
- }
- .right-name {
- font-size: 12px;
- font-family: PingFangSC-Medium, PingFang SC;
- font-weight: 500;
- color: #333333;
- flex: 1;
- }
- .right-price {
- margin-right: 10px;
- margin-left: 20px;
- font-size: 8px;
- font-family: OPPOSans-B, OPPOSans;
- font-weight: normal;
- color: #ff3007;
- }
- .right-project {
- font-size: 12px;
- font-family: PingFangSC-Regular, PingFang SC;
- font-weight: 400;
- color: #ffc630;
- }
- // <div class="programmeList">
- // <div class="weekDetails">
- // <div class="contentItem">
- // <div class="itemTitle">第几次 干了啥 间隔多少天</div>
- // <div class="itemContent">
- // <img class="itemContent-img" />
- // <div class="itemContent-right">
- // <div class="right-content">
- // <div class="right-name">【深层清洁】美国super extra…</div>
- // <div class="right-price">79.00</div>
- // </div>
- // <div class="right-project">+润百颜</div>
- // </div>
- // </div>
- // </div>
- // </div>
- // </div>
- .programme-list {
- margin-top: 10px;
- height: 150px;
- overflow: scroll;
- position: relative;
- z-index: 1;
- .programme-info {
- position: relative;
- padding: 8px 10px;
- margin-bottom: 10px;
- display: flex;
- align-items: center;
- border-radius: 4px;
- border: 1px solid #f5f5f5;
- .programme-left {
- flex: 1;
- display: flex;
- .programme-img {
- width: 48px;
- img {
- width: 100%;
- display: block;
- }
- }
- .programme-tips {
- margin-left: 10px;
- font-size: 10px;
- font-family: PingFangSC-Regular, PingFang SC;
- font-weight: 400;
- color: #999999;
- line-height: 14px;
- }
- }
- .programme-right {
- flex: 1;
- font-size: 12px;
- font-family: PingFangSC-Regular, PingFang SC;
- font-weight: 400;
- color: #333333;
- line-height: 17px;
- padding-left: 125px;
- .duration {
- margin-top: 14px;
- }
- }
- .operation {
- position: absolute;
- left: 50%;
- transform: translateX(-50%);
- top: 10px;
- z-index: 10;
- width: 44px;
- background: #ffffff;
- box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05),
- 0px 6px 16px 0px rgba(0, 0, 0, 0.08),
- 0px 3px 6px -4px rgba(0, 0, 0, 0.12);
- border-radius: 2px;
- padding: 10px;
- font-size: 12px;
- font-family: PingFangSC-Regular, PingFang SC;
- font-weight: 400;
- color: #333333;
- line-height: 17px;
- .delete {
- margin-top: 20px;
- }
- }
- }
- .programme-active {
- border: 1px solid #fa852f;
- }
- }
- }
- .submit {
- margin-top: 18px;
- position: relative;
- left: 50%;
- transform: translateX(-50%);
- width: 176px;
- height: 28px;
- line-height: 28px;
- background: #fa7d22;
- border-radius: 14px;
- text-align: center;
- font-size: 14px;
- font-family: PingFangSC-Medium, PingFang SC;
- font-weight: 500;
- color: #ffffff;
- }
- }
- .block {
- width: 540px;
- background: #ffffff;
- border-radius: 8px;
- position: relative;
- padding: 42px;
- .delete-pupop {
- position: absolute;
- width: 32px;
- height: 32px;
- top: 5px;
- right: 5px;
- img {
- width: 100%;
- height: 100%;
- display: block;
- }
- }
- .pupop-title {
- font-size: 14px;
- font-family: PingFangSC-Medium, PingFang SC;
- font-weight: 500;
- color: #333333;
- line-height: 20px;
- text-align: center;
- }
- .skinDiv {
- justify-content: center;
- display: flex;
- flex-wrap: wrap;
- }
- .skin-item {
- margin-top: 20px;
- width: 172px;
- background: #f4f7ff;
- border-radius: 2px;
- border: 1px solid #557cff;
- line-height: 23px;
- font-size: 12px;
- font-weight: 400;
- color: #333333;
- text-align: center;
- margin-right: 20px;
- }
- .skin-item-not {
- margin-top: 20px;
- width: 172px;
- height: 25px;
- background: #f5f5f5;
- line-height: 25px;
- border-radius: 2px;
- font-size: 12px;
- font-weight: 400;
- color: #333333;
- text-align: center;
- margin-right: 20px;
- }
- // <div class="skinDiv">
- // <div class="skin-item"
- // v-for="item,index in skinTag"
- // :key="index">
- // {{item.title}}
- // </div>
- // </div>
- .faceTag {
- margin-top: 20px;
- width: 426px;
- height: 221px;
- overflow-y: scroll;
- }
- .faceTagContent {
- display: flex;
- // align-items: center;
- }
- .faceTagTitle {
- margin-top: 20px;
- text-align: right;
- width: 50px;
- font-size: 14px;
- font-weight: 500;
- color: #333333;
- }
- .faceTagHor {
- flex: 1;
- display: flex;
- align-items: center;
- flex-wrap: wrap;
- }
- .faceTagItem-not {
- margin-top: 15px;
- margin-left: 10px;
- width: 49px;
- height: 25px;
- background: #f5f5f5;
- border-radius: 2px;
- line-height: 25px;
- text-align: center;
- font-size: 12px;
- font-weight: 400;
- color: #333333;
- }
- .faceTagItem {
- margin-top: 15px;
- margin-left: 10px;
- width: 49px;
- height: 25px;
- background: #f4f7ff;
- border: 1px solid #557cff;
- border-radius: 2px;
- line-height: 23px;
- text-align: center;
- font-size: 12px;
- font-weight: 400;
- color: #333333;
- }
- // <div class="faceTag">
- // <div class="faceTagContent" v-for="item,index in faceTagData" :key="index">
- // <div class="faceTagTitle">{{item.title}}</div>
- // <div class="faceTagHor">
- // <div
- // class="faceTagItem"
- // v-for="tag,index in item.item"
- // :key="index"
- // @click="selectSkingTag(index)"
- // >{{tag}}</div>
- // </div>
- // </div>
- // </div>
- .noticeInput {
- margin-top: 50px;
- margin-left: 80px;
- padding: 10px;
- width: 307px;
- height: 184px;
- border: 1px solid #f5f5f5;
- }
- .noticeSubmit {
- margin-top: 20px;
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- }
- .submit-back {
- width: 100px;
- height: 29px;
- border-radius: 14px;
- border: 1px solid #fa7d22;
- font-size: 14px;
- font-weight: 500;
- color: #fa7d22;
- line-height: 29px;
- text-align: center;
- margin-left: 22px;
- }
- .submit-notice {
- width: 100px;
- height: 29px;
- border-radius: 14px;
- font-size: 14px;
- font-weight: 500;
- background: #fa7d22;
- color: white;
- line-height: 29px;
- text-align: center;
- margin-left: 22px;
- }
- // <div class="noticeSubmit">
- // <div class="submit-back" @click="backSubmit(3)">返回</div>
- // <div class="submit-notice" @click="submitFrequency(3)">确定</div>
- // <div class="submit-notice" @click="submitFrequency(3)">跳过</div>
- // </div>
- .project-select {
- margin-top: 26px;
- position: relative;
- left: 50%;
- transform: translateX(-50%);
- width: 300px;
- }
- .frequency {
- margin-top: 20px;
- display: flex;
- justify-content: center;
- align-items: center;
- font-size: 14px;
- font-family: PingFangSC-Regular, PingFang SC;
- font-weight: 400;
- color: #333333;
- line-height: 20px;
- .week-select {
- width: 77px;
- margin-right: 8px;
- }
- .times-select {
- width: 77px;
- margin: 0 8px 0 20px;
- }
- }
- .submit-frequency {
- position: relative;
- left: 50%;
- transform: translateX(-50%);
- margin-top: 58px;
- width: 176px;
- height: 28px;
- text-align: center;
- background: #fa7d22;
- border-radius: 14px;
- font-size: 14px;
- font-family: PingFangSC-Medium, PingFang SC;
- font-weight: 500;
- color: #ffffff;
- line-height: 28px;
- }
- }
- }
- </style>
|